0

In my project which I am building using react typescript, I have it set out as seen below I want to make it so that When I press a button that is currently in the "Topbar" it minimizes the sidebar as well as the left-hand side of my Top Bar which contains a few elements. How do I pass the state of open/close properly between the two or how should I go about this? Do I need to merge the sidebar and top bar into a single component? Cheers.

<div className="App">
        <div className='Root-Container'>
          <Topbar />
          <div className='Sub-Pannels-Root'>
            <div className='Side-Bar-Root'>
            <Sidebar/>
            </div>
            <div className='Main-Pannel-Container-Root'>
            </div>
          </div>
        </div>
    </div>
JPWilson
  • 691
  • 4
  • 14
  • The standard approach for this in react is to lift the state up to the closest common parent component, and then pass it down via props (or via context). https://beta.reactjs.org/learn/sharing-state-between-components – Nicholas Tower Oct 27 '22 at 00:38
  • HI thanks I did have a look at that but I wasn't sure how I return the state from when it changes I am assuming I have to move the button out of Topbar and into a parent? – JPWilson Oct 27 '22 at 00:45
  • Does this answer your question? [How to make a shared state between two react components?](https://stackoverflow.com/questions/38901106/how-to-make-a-shared-state-between-two-react-components) – Derek Oct 27 '22 at 00:45
  • `I am assuming I have to move the button out of Topbar and into a parent?` You have to move the *state* out to the parent, but not necessarily the button. The component who's code you showed should have the state, and then it passes props down to both topbar and sidebar – Nicholas Tower Oct 27 '22 at 00:47
  • Ok thank you I guess I will need to rewrite / order a little! – JPWilson Oct 27 '22 at 00:53

1 Answers1

0

You could use Redux, a library allowing a sort of global state. With it, you could set things up such that the minimise button toggles the state, and both components have conditional rendering. It's often more convenient than props drilling if you have nested components.

Mark Norrish
  • 26
  • 2