It could be a silly question but I was wondering is there any way to pass a component as props to component tag.something like this
const Main = (props) => {
return (
<header>
main
</header>
<Content>
<{props.homePage} /> //this should be like this <Home />
</Content>
<Footer>
</Footer>
);
};
I have a main page that contains header, content, and footer and I want to change dynamically the component in the content.but whenever I pass the component as props react take it as a raw text and give me an error. Please, tell me if this method is the correct way or if I have to use another way.
You were very very close, it should look something like:
const Page1 = (props) => <div>my first page</div>;
const Main = (props) => <div>{props.content}</div>;
class App extends React.Component {
render () {
return (
<div>
Header
<Main content={<Page1 />} />
Footer
</div>
);
}
}
ReactDOM.render(<App/>,document.getElementById('root'));
http://codepen.io/cjke/pen/VPYJpK?editors=0010
As an alternative, and probably a bit more natural is to leverage children:
const Page1 = (props) => <div>my first page</div>;
const Main = (props) => <div>{props.children}</div>;
class App extends React.Component {
render () {
return (
<div>
Header
<Main><Page1 /></Main>
Footer
</div>
);
}
}
ReactDOM.render(<App/>,document.getElementById('root'));