title: I want my menu to update based on which view I'm on React (alternative to reactdom.render)
body: <p>I'm now convinced I am doing this wrong based on the fact that my app doesn't show the menu unless I open dev tools..</p>
  
  <p>On my landing page, I have a menu bar that has the app name/logo as well as menu items and a log in button in my webapp, like this:
  <a href="https://i.stack.imgur.com/ooayP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ooayP.png" alt="landing page menu"></a></p>
  
  <p>I've added that by having my <code>main.html</code> file contain:</p>
  
  <pre><code>&lt;div id="render-target"&gt;
      &lt;div id="header-container"&gt;&lt;/div&gt;
      &lt;div id="app-container"&gt;&lt;/div&gt;
      &lt;div id="footer-container"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my <code>main.jsx</code> file's <code>render()</code> function look like this:</p>
  
  <pre><code>render(
      &lt;div className='container'&gt;
          &lt;div id="header-container"&gt;
              &lt;MenuBar /&gt;
          &lt;/div&gt;
  
          &lt;div id="app-container"&gt;
              &lt;TableSelect /&gt;
          &lt;/div&gt;
  
          &lt;div id="footer-container"&gt;
          // some footer code
          &lt;/div&gt;
      &lt;/div&gt;,
      document.getElementById('render-target'));
  </code></pre>
  
  <p>Now, the user can select a "table" and load the data from that, which takes them to a different view.</p>
  
  <p>So, basically from the <code>TableSelect</code> view, the user clicks a checkbox and loads a <code>TableLoad</code> view, which loads a table for display (in a super not OK way probably, since it calls <code>ReactDOM.render(&lt;TableDisplay tableId={this.props.id}/&gt;,document.getElementById('app-container'));</code>)</p>
  
  <p>Then, in the <code>TableDisplay</code> view I have </p>
  
  <pre><code>componentDidUpdate() {
      ReactDOM.render(&lt;MenuBar currentView="tableDisplay" rows={this.props.rows} cols={this.props.cols} tableId={this.props.tableId} /&gt;, document.getElementById('header-container'));
  }
  </code></pre>
  
  <p>which calls the <code>MenuBar</code> view with the current data properties (or rather, replaces the DOM). What I want to see is below, including the Edit button:</p>
  
  <p><a href="https://i.stack.imgur.com/q181P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q181P.png" alt="new menu"></a></p>
  
  <p>This seems to only get triggered unreliably... (though without fail if I have Chrome Dev tools open). I think it's just taking some time for the state to pass and I only show the menu <code>if (this.state.currentView !== "loadTable" &amp;&amp; this.props.cols !== undefined &amp;&amp; this.props.rows !== undefined)</code>. </p>
  
  <p>I guess I know that <code>ReactDOM.render</code> is not what I want here, but I want to show the menu even if I don't have column/row data and I need to pass the column/row data once I get it. It feels like a Menu shouldn't need data information, but in order to add data to the table I have to have that data somehow. </p>
  
  <hr>
  
  <p>It's really clear to me that I'm doing a lot of things the non-react way. My app is currently deployed at <a href="https://ideal-engine.herokuapp.com" rel="nofollow noreferrer">ideal-engine.herokuapp.com</a> and the code is at <a href="https://github.com/adinutzyc21/ideal-engine/tree/master/compareApp" rel="nofollow noreferrer">github repo</a>, if anyone who knows React and feels altruistic enough to do a code review let me know.</p>