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" />