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

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);

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

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]

Спасибо)