Проверить свойство всех дочерних элементов при клике по одному из них

Question

Подскажите, пожалуйста, концептуально, как организовать умную компоненту (родителя) и его дочек. Есть компонент "Group" со свойством active, в котором есть дочки. У дочки есть свойство isClicked. Нужно сделать так, чтобы если у всех дочек isClicked=true, то у родителя active='allClicked', если хотя бы у одной isClicked=false (но не у всех), то у родителя active='someClicked', нну и если у всеx isClicked=false, то у active=' notClicked'. При этом дочерних элементов может быть сколько угодно. Заранее спасибо за помощь. Реакт только изучаю. Буду благодарен любому ответу и ссылкам полезным

Answer 1

import { useState } from "react";

export default function App() {
  const [children, setChildren] = useState([
    { clicked: undefined, id: 1 },
    { clicked: undefined, id: 2 },
    { clicked: undefined, id: 3 }
  ]);

  function onClick(id) {
    setChildren((p) => {
      let r = [...p];
      r[r.findIndex((e) => e.id === id)].clicked = true;
      return r;
    });
  }

  return (
    <>
      {children.map((ch) => (
        <Child key={ch.id} id={ch.id} onClick={onClick} />
      ))}
      {children.every((e) => e.clicked)
        ? "All clicked"
        : children.some((e) => e.clicked)
        ? "Some clicked"
        : "Not clicked at "all}
    </>
  );
}

const Child = ({ id, onClick }) => {
  return <button onClick={() => onClick(id)}>{id}</button>;
};

БЛОГ НА HUSL

Проверить свойство всех дочерних элементов при клике по одному из них

Ответы (1 шт):