Change the state of another component using functionnal components in React-CodePudding

I have a button in my header that has to switch the state of the lateral menu of the page (to know if it has to be shown or not). I found out on Internet how to do so using Class Components, but not with Functional Components, do you have any idea on how to achieve that ?

Here's a simplification of my actual code in order to reproduce my issue (I removed all useless code).

App.js :

function App() {
  return (
    <div className="App">
        <Header />
        <div>
            <LateralMenu />
        </div>
    </div>
  );
}

The Header component :

function Header() {
    const [lateralIsOpen, setLateralIsOpen] = useState(true);

    function changeLateralMenu() {
        setLateralIsOpen(!lateralIsOpen);
    }

    return (
        <header>
            <div onClick={ changeLateralMenu }>
        </header>
    );
}

And the LateralMenu component :

function Header() {
    const [lateralIsOpen, setLateralIsOpen] = useState(true);

    return (
        <section>
            { lateralIsOpen ? "open" : "closed" }
        </section>
    );
}

I tried (but maybe not correctly) to declare the lateralIsOpen State in the App component and sending it through props to my children componenents (Header & LateralMenu).

I also tried looking at this question (and a few others) which is pretty similar, but don't see how I can apply it in my case because (as I understand) he uses a button in the parent component, that changes a state in the parent component, and then send it to the children through props... Where in my case, the button to switch it is already in a child.

CodePudding user response：

I'd suggest you to move the state out of the LateralMenu to the parent (App) and then just pass the toggle function to the Header to toggle it.

export default function App() {
  const [lateralIsOpen, setLateralIsOpen] = useState(true);

  return (
    <div className="App">
      <Header toggleLateral={() => setLateralIsOpen((prev) => !prev)} />
      <div>
        <LateralMenu isOpen={lateralIsOpen} />
      </div>
    </div>
  );
}

function Header({ toggleLateral }) {
  function changeLateralMenu() {
    toggleLateral();
  }

  return (
    <header>
      <div onClick={changeLateralMenu}>click</div>
    </header>
  );
}

function LateralMenu({ isOpen }) {
  return <section>lateral is {isOpen ? 'open' : 'closed'}</section>;
}

Codesandbox: https://codesandbox.io/s/eager-heyrovsky-z75njd