“passar adereços em componente composto” Respostas de código

passar adereços em componente composto

//parent

const Parent = ({ children }) => {
  const [checked, setChecked] = useState(false);

  const allChildren = React.Children.map(children, (child) => {
    const clone = React.cloneElement(child, {
      checked,
      setChecked,
    });
    return clone;
  });
  return allChildren;
};

//child
const Child = ({  checked, setChecked }) => {
  return (
    <div onClick={() => setChecked(!checked)} style={{ color: "red" }}>
      child content
    </div>
  );
};

//app
<Parent>
    <Child /> 
</Parent>