s24344

Editor -> Code Style -> JavaScript -> Spaces -> Within -> ES6 import/export braces

делегирование, конечно же

UPD.

Держи. И ту теорию нужно повесить на событие load

const [ arr1, arr2 ] = arr.list
  .map(n => [ n, +n.pos.dv.slice(1) ])
  .sort((a, b) => a[1] - b[1])
  .reduce((acc, n) => (acc[+(n[1] >= 38)].push(n[0]), acc), [ [], [] ])
  .map(n => ({ list: n }));

const arrM = arr.filter(subarr => !subarr.some(item => item.value === '-'))

Как будем определять, должен ли элемент массива остаться:

const mustStay = arr => arr.every(n => n.value !== '-');

Собираем новый массив:

const newArr = arr.filter(mustStay);

Изменяем существующий:

arr.reduceRight((_, n, i, a) => mustStay(n) || a.splice(i, 1), null);

// или

arr.splice(0, arr.length, ...arr.filter(mustStay));

// или

let numDeleted = 0;

for (const [ i, n ] of arr.entries()) {
  arr[i - numDeleted] = n;
  numDeleted += !mustStay(n);
}

arr.length -= numDeleted;

Если я правильно понимаю, данные в LS вам нужны для инициализации приложения. Создайте функцию для работы с локальными данными, то есть изменяйть items в App, а не NavigateServise (исправьте Servise на Service), а метод navigateServise.setData() используйте только для синхронизации данных в LS.

Все, что вам нужно, это сравнивать текущую позицию скрола, с предыдущей. И если текущая позиция больше, чем предыдущая, значит мы скроллим вправо, если меньше, то влево. А finish можно расчитывать, если скролл равен нулю (это лево), или если скролл равен scrollWidth + offsetWIdth.
Пример https://jsfiddle.net/Vlad_IT/Lwqaf139/

Сделайте отдельный компонент для вывода данных и создайте два его экземпляра: первому передаёте первые три элемента, а второму - все оставшиеся. Как-то так:

const DataList = ({ data }) => (
  <div>
    {data.map((item) => (
      <div key={item.id}>
        {item.title}
        {item.round.map((r) => <div key={r.id}>{r.total}</div>)}
      </div>
    ))}
  </div>
);

<DataList data={props.data.slice(0, 3)} />
<Separator />
<DataList data={props.data.slice(3)} />

добавляем разделитель по нужному индексу:

import { Fragment } from 'react'; // подключаем react fragment
....
// перед 3-им индексом, вставляем разделитель, индексы нумеруются от 0
render() {
  return (
    <div>
      {
        this.props.data.map((item, index) => {
          console.log('item', item);
          return (
            <Fragment key={item.id}>
              {index === 3 && ( 
                <div>
                  разделитель
                </div>
              )}
              <div key={item.id}>
                {item.title}
                {item.round.map((r) => {
                  console.log('r', r);
                  return (
                    <div key={r.id}>
                      {r.total}
                    </div>
                  )
                })}
              </div>
            </Fragment>
          )
        })
      }
    </div>
  )
}

А почему никто не захотел применить reduce? Может я чего не знаю?

const newArray = arr.reduce((result, elem) => {
  const alreadyExist = Boolean(result.find(qwerty => qwerty.country === elem.country));

  if(!alreadyExist) {
    result.push({
      id: result.length + 1,
      country: elem.country
    });
  }
  return result;
}, []);

Можно без parseFloat, при вычитании оба операнда все равно приводятся к числу (ведущие нули отбрасываются).
arr.sort((a, b) => a.value - b.value);

Final UPD (не заметил, что у вас id исходных объектов не сохраняются):

const res = [...new Set(arr.map(o => o.country))].map((country, i) => ({id: i + 1, country}));

const players = data[0].locations[0].players;
const holes = new Array();
for (player of players){
	holes.filter(f=>f.id === player.holeId).length === 0 ? holes.push({id: player.holeId, value: player.score}) : holes.filter(f=>f.id === player.holeId)[0].value+= player.score;
}

const keys = [ 'firstName', 'lastName' ];
const values = document.querySelector('input').value.toLowerCase().match(/\S+/g) || [];
const result = arr.filter(n => keys.some(k => values.some(v => n[k].toLowerCase().includes(v))));

.cards__list-wrapper {
  margin: 0;
}
.cards__item:first-child, .cards__item:nth-child(5n) {
  padding: 0 15px 0 0;
}
.cards__item:nth-child(4n) {
  padding: 0 0 0 15px;
}

Можно попробовать использовать JSON для любой структуры данных.
Правда есть ограничение - максимальная длинна URL
Кодировать так:

const baseURL = "https://www.website.ru/catalog/kurtki/?";
const data = {
  size: [41332, 43296, 44278],
  brand: [13974],
  consists: [14, 2]
};
const resultURL = baseURL + "?" + encodeURIComponent(JSON.stringify(data));

Декодировать аналогично:

const params = resultURL.split("?")[1];
const data = JSON.parse(decodeURIComponent(params));