Как осуществить передачу данных между компонентами React?

Question

[Slav4ka]

Пытаюсь разобраться, как передавать данные между siblings-компонентами. Нужно сделать так, чтоб класс active был только у одного child-компонента (Можно было выделить только один div).
Я пытался реализовать это через хуки, не классы. В результате при клике у выбранного компонента меняются классы, а у его siblings ничего не происходит. Хотя все должно быть синхронно и только один компонент должен быть с классом "active". Как я понимаю, они попросту не перерисовываются. Вопрос такой, как это исправить? И такой подход для реализации заданной цели правильный? Или моя идея в корне не верна, буду благодарен за ответ.

Answer 1

[0xD34F]

const ChildComponent = (props) => (
  <div
    className={`childComponent ${props.isActive ? 'active' : ''}`}
    onClick={props.onClick}
    data-id={props.id}
  >
    <h3>{props.text}</h3>
  </div>
);


const ParentComponent = ({ items }) => {
  const [ active, setActive ] = React.useState(null);

  const onClick = e => setActive(+e.currentTarget.dataset.id);
  // или
  // const onClick = e => setActive(+e.target.closest('[data-id]').dataset.id);

  return (
    <div>
      {items.map(n =>
        <ChildComponent
          key={n.id}
          onClick={onClick}
          isActive={n.id === active}
          {...n}
        />
      )}
    </div>
  )
};


ReactDOM.render(
  <ParentComponent
    items={[
      { id:  69, text:  'hello, world!!' },
      { id: 187, text:  'fuck the world' },
      { id: 666, text: 'fuck everything' },
    ]}
  />,
  document.getElementById('root')
);

Comments

[Slav4ka]

Большое спасибо)

[Slav4ka]

такой момент возник: я чуть изменил функцию Click для того, чтоб при повторном клике выделение исчезало, и код перестал работать.

const onClick = e => {
        const receiveId = e.target.dataset.id;
        console.log("came " + receiveId + "; " + "active " + active);
        if (receiveId === active) {
            console.log("Set null");
            setActive(null);
        } else {
            console.log("Set " + receiveId);
            setActive(receiveId);
        }
    };

[0xD34F]

Slav4ka, в dataset лежат строки, а id - числа. Преобразование в число потеряли.

[Slav4ka]

Спасибо)