How can i pass a component to another component via props - reactjs

Question

I have this scenario where my web application would have a header with 3 options. Depending on the options selected, the headers will be re-rendered with new options. Since I am new to React, my immediate idea of the code structure would be to have a empty main Header.js file which would render another component which is unique to the page's option. However, my googling didn't return any searches that would help me understand how to pass components to another via react-router v4.
An example:
Header: Steak | Pasta | Burgers
If the user selects Steak, the same header would now display the following:
Header: Black-Pepper | Mushroom | Chilli
The contents of the header is supposed to change according to what the user selected previously
Thank you and I hope I do not get mark down because I really have no idea how else to ask this question.

Answer 1

I prepare you a basic idea for you, with react-router-dom:
const {Router, Route, IndexRoute, Link} = ReactRouter;
// A main React component using this.props.children will pull in all the children Routes in the router function at the bottom.
const App = React.createClass({
render: function() {
return(
<div>
{this.props.children}
</div>
);
}
});
const Home = React.createClass({
render: function() {
return(
<div>
<ul>
<li><Link to="link-steak">Steak</Link></li>
<li><Link to="link-pasta">Pasta</Link></li>
<li><Link to="link-burgers">Burgers</Link></li>
</ul>
</div>
);
}
});
const LinkOne = React.createClass({
render: function() {
return(
<div>
<ul><li>steak 1</li><li>steak 2</li><li>steak 3</li></ul>
<Link to="/">back</Link>
</div>
);
}
});
const LinkTwo = React.createClass({
render: function() {
return(
<div>
<ul><li>pasta 1</li><li>pasta 2</li><li>pasta 3</li></ul>
<Link to="/">back</Link>
</div>
);
}
});
const LinkThree = React.createClass({
render: function() {
return(
<div>
<ul><li>burger 1</li><li>burger 2</li><li>burger 3</li></ul>
<Link to="/">back</Link>
</div>
);
}
});
ReactDOM.render((
<Router>
<Route path="/" component={App}>
<IndexRoute component={Home} />
<Route path="link-steak" component={LinkOne} />
<Route path="link-pasta" component={LinkTwo} />
<Route path="link-burgers" component={LinkThree} />
</Route>
</Router>
), document.getElementById('app'));
https://codepen.io/ene_salinas/pen/KGbEoW?editors=0010

Answer 2

There are a few ways to go about this but without knowing your project in depth here's a general approach you could use:
(You can create functional components and use them or just write all the JSX in the Header component.)
Header component extends React.Component {
state= {
selected: "burger"
}
// Create a method for each: "burger", "steak" etc...
this.setBurgerMenu = () => {
this.setState({selected: "burger"}, () => {})
}
render() {
return (
<div>
<button onClick={this.setBurgerMenu}>Burger</button>
<button onClick={this.setSteakMenu}>Steak</buttton>
<button onClick={this.setChiliMenu}>Chili</button>
<div>
{this.state.selected === "burger" && <BurgerMenu />}
{this.state.selected === "steak" && <SteakMenu />}
{this.state.selected === "chili" && <ChiliMenu />}
<div>
</div>
)
}
}
If you're making a nav bar and these menu items simply point to a link then the easiest solution would be to use a library with menus and sub menus.