Comment passer un React Hook à un composant enfant ?

Question

Je veux passer le setter d'un React Hook à un Child Component. Ainsi, un bouton dans le composant enfant met à jour l'état via le setter qui est enregistré dans le composant parent. J'ai essayé la configuration suivante mais j'obtiens un message d'erreur :

TypeError : setshowOptionPC n'est pas une fonction onClick

Mon approche est-elle même possible ? Et si non, comment pourrais-je faire cette structure en utilisant un React Hook.

Ci-dessous une version simplifiée de mon code :

import React, { useState } from "react";

function ChildComponent({ setshowChildOptionBC, setshowChildOptionPC }) (
  <div>
    <button
      onClick={() => {
        setshowChildOptionPC(false);
        setshowChildOptionBC(true);
      }}
    >
      BC
    </button>
    <button
      onClick={() => {
        setshowChildOptionPC(true);
        setshowChildOptionBC(false);
      }}
    >
      PC
    </button>
  </div>
);

function ParentComponent() {
  const [showOptionBC, setshowOptionBC] = useState(true);
  const [showOptionPC, setshowOptionPC] = useState(false);

  return (
    <div>
      <ChildComponent
        setshowChildOptionBC={setshowOptionBC}
        setshowChildOptionPC={setshowOptionPC}
      />
      {showOptionBC && <div>BC</div>}
      {showOptionPC && <div>PC</div>}
    </div>
  );
}

export default ParentComponent;

Answer 1

Je pense que vous avez juste oublié de déstructurer les props dans votre composant enfant. Ceci pourrait t'aider.

function ChildComponent({setshowOptionBC, setshowOptionPC}) {..