I'm trying to have a page that switches out which component is rendered based off of a pair of navigation buttons. The page is set up like this
ReactDOM.render(<Logo/>, document.getElementById('logo')); ReactDOM.render(<Upload/>, document.getElementById('main')); ReactDOM.render(<NavButtons/>, document.getElementById('nav_buttons')) ReactDOM.render(<Footer />, document.getElementById('footer'));
<Upload/> component is the one I wish to cycle out. So when the user pressed the 'next' navigation button a different component would then be loaded on the page.
How do you go about this? Am I attacking this problem correctly? I am new to react so trying to figure out the best way to utilize it.
Ended up using both answers below for different use cases. Both work to accomplish this though.
Your use case can be achieved by changing the internal state of the parent container on user clicks and rendering different child components by checking which component to render based on the state value.
Since, you are new to react, I don't even know if u get the point. Go through react docs about state, props and lifecycles before starting to code in react.