title: How to manipulate a variable in index.tsx (most parent) from other classes i.e NavBar component?
body: <p>I currently have my index.tsx as follows</p>
  
  <pre><code>const dark = createMuiTheme({
    palette: {
      type: 'dark',
    }
  })
  
  const light = createMuiTheme({
    palette: {
      type: 'light',
    }
  })
  
  const toggle:boolean = false;
  
  ReactDOM.render(
    &lt;MuiThemeProvider theme={toggle?dark:light}&gt;
      &lt;CssBaseline /&gt;
      &lt;App /&gt;
    &lt;/MuiThemeProvider&gt;,
    document.getElementById('root') as HTMLElement
  );
  </code></pre>
  
  <p>I have recently changed it so I could implement a dark-mode toggle, which happens at MuiThemeProvider.</p>
  
  <p>The problem is I'm not sure how I could manipulate a boolean (toggle) varialbe at index.tsx (most parent file) where all my logic/codes are in App.tsx or especially on NavBar.tsx which is a component inside App.tsx which has a button to trigger the night-mode.</p>
  
  <p>I've been only using React recently so I do know that I will have to use props to somehow escalate the value to the parent... but how does that actually happen and  is that the only correct way?</p>
  
  <p>TLDR; How would I manipulate a variable at index from NavBar, given the architecture below? Also, it seems like index.tsx is a little different from others, as there is no class in it. If so what is the best way to keep track of a variable? Can I add a state just like every other component?
  index > App > NavBar</p>