Does the 'MainLayout' component have to be stateless?

[etmarch]

Everything was working fine when my layout component was stateless:

const MainLayout = ({content = () => null}) => (
  <div className="MainLayout">
    <header>
      This is our header
    </header>
    <main>
      {content()} <- Content has to be a function
    </main>
    <footer>
      <p>Now you shall sleep!</p>
    </footer>
  </div>
);

But because this component is the top level component and I need to set the context for my Material-UI theme, I dont think I can use getChildContext() or childContextTypes inside a stateless component.

When I switched this component into an ES6 class, or using the React.createClass syntax, I am getting these errors now: ReferenceError: content is not defined.

So back to the question: Do we need to use stateless components for our top-level layout component? And if so, how would you recommend we set the context from the top-level?

[etmarch]

Well I feel really silly - of course without explicitly passing in the 'content' prop (like stateless), you need to use this.props.content()... closing this issue (although I am still curious what would be best practice)