Pass component tag as a props in react native

Question

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.

Answer 1

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'));