I created a hook to toggle the visibility of a NavBar in my webpage (this is done in NavBar.jsx), I need to toggle the navbar elsewhere in my code, namely under Journey.jsx, can I pass these as params? How should I approach this?

Here are the essential/boiled-down excerpts of my code if they can help....

App.jsx:

function App () {
    return (
        <Router hashType="hashbang">
                <div className="App">
                        <NavBar />
                <Switch>
                                <Route exact path="/l" component={() => <Lorem/>} />
                                <Route exact path="/j" component={() => <Journey/>} />
                                <Route exact path="/i" component={() => <Ipsum/>} />
                        </Switch>
                </div>
        </Router>
    );
}

NavBar.jsx:

function NavBar () {
    //I need access to these in Journey.jsx
    const [sidebar, setSidebar] = useState(false);
    const showSidebar = () => setSidebar(!sidebar);

    return(
        //elaborations about the menu where I use these functions/varariables
    );
}

Journey.jsx:

function Journey () {
    return (
        //some unimportant divs
        <button onClick={****I need access to showSidebar here****} ></button>
    );
}

The way my NavBar is configured is so that the hamburger icon that toggles it is visible and usable from everywhere (including the journey page), but I want this specific button only on the journey page and nowhere else because, according to the theme of the website (by my team of designers) its supposed to be an aesthetic functionality

What can I do to make this happen? because I've tried re-creating the hook into App.jsx and try passing each func/var as props and then in Journey referencing it as props.sidebar etc. but that doesnt work either....

if the solution is to just pass as parameters, how exactly do I do that because I tried and it said something like it wasnt declared.

Any alternatives?

Thank you,

CodePudding user response：

• either you lift the state up to their closest common ancestor (app.js) and create a handleClick method in App.js (do the state change in App.js) and pass down the method with navBar current state as porps to Journey and NavBar.
• or you use a Context check: https://reactjs.org/docs/context.html and https://reactjs.org/docs/hooks-reference.html#usecontext for further info.

CodePudding user response：

The easiest way to share state is lifting state up to their common parent component, and then pass the state and some methods which change state by props, like this:

function App() {
  // lift state up
  const [sidebar, setSidebar] = useState(false);
  const showSidebar = () => setSidebar(!sidebar);
  return (
    <Router hashType="hashbang">
      <div className="App">
        {/* pass state by props */}
        <NavBar sidebar={sidebar} showSidebar={showSidebar} />
        <Switch>
          <Route exact path="/l" component={() => <Lorem />} />
          {/* pass state by props */}
          <Route exact path="/j" component={() => <Journey sidebar={sidebar} showSidebar={showSidebar} />} />
          <Route exact path="/i" component={() => <Ipsum />} />
        </Switch>
      </div>
    </Router>
  );
}

function NavBar ({sidebar,showSidebar}) {

  return(
      //elaborations about the menu where I use these functions/varariables
  );
}

function Journey ({sidebar,showSidebar}) {
  return (
      // use state from props
      <button onClick={showSidebar} ></button>
  );
}

Also you can use context to pass state deeply.

You can read the latest react docs beta, which describe very detailed:

• React Doc Beta: Sharing State Between Components
• React Doc Beta: Passing Data Deeply with Context

I hope it helpful for you!