score:8

Accepted answer

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

Related Query

More Query from same tag