Search code examples
javascripthtmlreactjsreact-dom

I want my menu to update based on which view I'm on React (alternative to reactdom.render)

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..

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: landing page menu

I've added that by having my main.html file contain:

<div id="render-target">
    <div id="header-container"></div>
    <div id="app-container"></div>
    <div id="footer-container"></div>
</div>

and my main.jsx file's render() function look like this:

render(
    <div className='container'>
        <div id="header-container">
            <MenuBar />
        </div>

        <div id="app-container">
            <TableSelect />
        </div>

        <div id="footer-container">
        // some footer code
        </div>
    </div>,
    document.getElementById('render-target'));

Now, the user can select a "table" and load the data from that, which takes them to a different view.

So, basically from the TableSelect view, the user clicks a checkbox and loads a TableLoad view, which loads a table for display (in a super not OK way probably, since it calls ReactDOM.render(<TableDisplay tableId={this.props.id}/>,document.getElementById('app-container'));)

Then, in the TableDisplay view I have 

componentDidUpdate() {
    ReactDOM.render(<MenuBar currentView="tableDisplay" rows={this.props.rows} cols={this.props.cols} tableId={this.props.tableId} />, document.getElementById('header-container'));
}

which calls the MenuBar view with the current data properties (or rather, replaces the DOM). What I want to see is below, including the Edit button:

new menu

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 if (this.state.currentView !== "loadTable" && this.props.cols !== undefined && this.props.rows !== undefined).

I guess I know that ReactDOM.render 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.

It's really clear to me that I'm doing a lot of things the non-react way. My app is currently deployed at ideal-engine.herokuapp.com and the code is at github repo, if anyone who knows React and feels altruistic enough to do a code review let me know.

Solution

  • You might consider using a routing solution to help you out, such as react-router, where you can say what component to show at any given route. You can even receive route params (like table ids and such) that will tell you what data to fetch for display.