0xD34F

Не надо никакие индексы трогать, достаточно дополнить строку спереди до нужной длины:

const max = 4;

<div>
  {Array.from(
    value.padStart(max, '-'),
    n => <span>{n}</span>
  )}
</div>

const [ selected, setSelected ] = useState({});

const onChange = ({ target: { value, dataset: { id } } }) => {
  setSelected({ ...selected, [id]: value });
};

return (
  <div>
    {data.map(({ id, name, variants }) => (
      <div>
        <div>{name}</div>
        <select
          value={selected[id]}
          data-id={id}
          onChange={onChange}
        >
          <option>ну давай, выбери что-нибудь</option>
          {variants.map(n => <option value={n.price}>{n.data.period}</option>)}
        </select>
        <div>{selected[id] || 'НИЧЕГО НЕ ВЫБРАНО'}</div>
      </div>
    ))}
  </div>
);

Информацию о валютах сложить в массив объектов вида { имя валюты, относительная стоимость }.
На основе этого массива создавать input'ы.
Когда пользователь что-то вводит, запоминать не только значение, но и имя валюты.
Вывод значений - последняя редактировавшаяся валюта как есть, для остальных значение умножается на отношение относительных стоимостей, собственной и последней редактировавшейся.

https://jsfiddle.net/3h8zfw2k/

Но как получить доступ к интервалу из уже имеющегося useEffect?

очистка эффекта

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

The useRef() Hook isn’t just for DOM refs. The “ref” object is a generic container whose current property is mutable and can hold any value, similar to an instance property on a class.

this.setState(({ items }) => ({
  items: items.map((n, i) => ({ ...n, id: i })),
}));

Но вообще - зачем перезаписывать? Сразу кладите в стейт то, что нужно. Если, например, массив попадает в компонент через props, то

state = {
  items: this.props.items.map((n, i) => ({ ...n, id: i })),
}

Да уже всё сделано. Надо только лишнее вырезать. Зачем компонент SidebarItem что-то тянет из redux'а? Не надо. Его задача - показать чекбокс в указанном состоянии, установить переданный из родителя обработчик события. Всё:

export default ({ filter, checked, onChange, children }) => (
  <div>
    <label>
      <input
        type="checkbox"
        name={filter}
        onChange={() => onChange(filter)}
        checked={checked}
      />
      {children}
    </label>
  </div>
);

return {
    ...user,
    isFollowed: !this.isFollowed
};

Вот бы узнать: с чего вы взяли, что user и this - это одно и то же?

Нужны две вещи.

Первая - функция, которая порежет массив на куски:

const chunks = (arr, chunkSize) => Array.from(
  { length: Math.ceil(items.length / chunkSize) },
  (n, i) => items.slice(i * chunkSize, (i + 1) * chunkSize)
);

Вторая - компонент карточки:

const Card = props => (
  <div className="style-review__slide-row">
    <a className="style-card style-review__style-card" href="#">
      <div className="style-card__overlay">
        <div className="style-card__title">{props.title}</div>
        <div className="style-card__category">
          {props.category}
        </div>
      </div>
    </a>
  </div>
);

После этого останется только получить массив, состоящий из массивов данных для отдельных карточек:

const chunkedItems = chunks(items, 3);

И отрендерить его:

<Swiper>
  {chunkedItems.map(cardItems => (
    <SwiperSlide className="swiper-slide style-review__slide">
      {cardItems.map(n => <Card {...n} />)}
    </SwiperSlide>
  ))}
</Swiper>

state = {
  markers: [],
  maxMarkersNum: 666,
}

onClick = ({ latlng }) => {
  this.setState(({ markers, maxMarkersNum }) => ({
    markers: markers.length >= maxMarkersNum
      ? []
      : [ ...markers, latlng ],
  }));
}

<Map onClick={this.onClick}>
  {this.state.markers.map(n => <Marker position={n} />)}
</Map>

https://jsfiddle.net/o8wbd6sa/

https://codesandbox.io/s/happy-edison-86gz7?file=/...

Ау, документацию для кого сделали?

setValue(value === e.target.value);

Лишнее: value ===.

Ну и ограничений не хватает, так что:

setValue(Math.min(max, Math.max(min, e.target.value)));

UPD. Вынесено из комментариев:

Хотел реализовать тоже самое с двойным range слайдером и оказалось несколько сложнее.

Ничего сложного.

Вам вообще не надо вызывать эту функцию, если только вы не скрываете задачу, которая стоит перед вами на самом деле. Вы уже применили map - он как раз "для каждого элемента списка".

Если нужен индекс - он в коллбек map'a передаётся вторым параметром:

{cats.map((cat, index) => (
  <li key={cat.description} className="catsItem">
    <img src={catsImg[index]} alt=""/>
    ...

Потому что вы не видите разницы между функцией и результатом её вызова.

Добавьте () => перед openLightboxOnSlide(key) (кстати, а какого хрена переменная, содержащая индекс, названа key?).

Но вообще, дополнительный метод не нужен. И объект хранить в lightIndex не надо. Пусть индекс принимает по умолчанию значение, которое не может быть корректным индексом (например null, или -1) - это будет означать, что показывать ничего не надо:

const [ lightIndex, setLightIndex ] = useState(null);

<img onClick={() => setLightIndex(key)} />

<ReactBnbGallery
  photos={photos}
  show={lightIndex !== null}
  activePhotoIndex={lightIndex}
  onClose={() => setLightIndex(null)}
/>

props.component || <a/>

props.component || 'a'

Забыли добавить ref={ref} элементу, который собираетесь скрывать.

Ну и вы бы ещё определились, как именно элемент должен отображаться/скрываться - через условный рендеринг, или стилизацию. Зачем использовать оба способа одновременно - я без понятия.

В MainWindow должно быть так:

<div className="mainWindow">
  {this.props.children}
</div>

Компонент Field - откуда вы взяли, что внутрь input можно что-то помещать? Это непарный тэг. Закрывающий тэг вырезать, добавить слеш в конец открывающего. Что дальше - вам виднее, всё зависит от того, как вы предполагаете использовать props.data. Обернуть всё в label, или сделать data значением input'а.

Следить за кликами за пределами корневого узла:

function Modal(props) {
  const root = useRef();

  useEffect(() => {
    const onClick = e => root.current.contains(e.target) || закрытьОкно();
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);

  return (
    <div ref={root}>
      ...
    </div>
  );
}

Или сделать так, чтобы корневой узел перекрывал всю страницу, и отслеживать клики по нему:

function Modal(props) {
  return (
    <div
      className="modal-overlay"
      onClick={e => (e.currentTarget === e.target) && закрытьОкно()}
    >
      ...
    </div>
  );
}

.modal-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}

Здесь useEffect не нужен. Замените его на useMemo или вообще не используйте никаких хуков, сразу доставайте нужное значение.