0xD34F

Информацию о валютах сложить в массив объектов вида { имя валюты, относительная стоимость }.
На основе этого массива создавать 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 или вообще не используйте никаких хуков, сразу доставайте нужное значение.

const rows = [items.map(item => item)];

Что это и зачем? Вы явно не понимаете, что здесь делаете. Передавайте items в DataGrid как есть, не надо ерундой заниматься.

И как быть в случае подобных вложенностей, когда мне от объекта user нужен только его username?

А как же

Все делаю по образцу из официальной документации к Material

??

Там, в документации, есть пример того, как следует подсовывать значения, отсутствующие непосредственно в объекте строки. Добавьте в определение колонки valueGetter: params => params.row.user.username.

sex: bool,
fired: bool

Что такое bool? Исправляйте:

sex: null,
fired: false

console.log(this.state.fired.checked);

Это ещё что за на хрен? Свойство checked есть у элемента, но не у значения в стейте. Просто fired.

Радиокнопки - задать value, убрать id, поместить внутрь label'ов (у них, соответственно, убрать for). Ну и сам тэг input, он непарный. Так что закрывающие тэги убрать, в конец открывающих добавить слеш.

Обработчик onChange пусть выглядит так:

changeInputHandler = ({ target: t }) => {
  this.setState(() => ({
    [t.name]: t.type === 'checkbox' ? t.checked : t.value,
  }));
}