How do I rewrite this React stateless function to ES6 React

Question

I'm building my first React App, the majority of it uses ES6 Components, but I took this layout component from a stateless function example and haven't been able to convert it to ES6 (extends Component). Specifically I can't figure out how to pass the content. What am I missing?

export const MainLayout = ({content}) => (

 <div className="main-layout">
   <header>
     <h2 href="/">Home</h2>
     <nav>
       <a href="/about">About</a>
       <a href="/profile">Profile</a>
       <AccountsUI />
     </nav>
   </header>
   <main>
{content}
   </main>
 </div>

)

Answer 1

Read DOCS about ES6 Classes

 class MainLayout extends React.Component { render() { return ( <div className="main-layout"> <header> <h2 href="/">Home</h2> <nav> <a href="/about">About</a> <a href="/profile">Profile</a> </nav> </header> <main> {this.props.content} </main> </div> ) } } ReactDOM.render( <MainLayout content="Main content" />, document.getElementById('app') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app" />