title: When should I use getInitialState in a React component
body: <p>I have a React component that toggles a <code>className</code> when the component is clicked</p>
  
  <pre class="lang-js prettyprint-override"><code>var Foo = React.createClass({
    getInitialState: function() {
      return {className: ''}
    },
  
    render: function(){
      var className = 'bar ' + this.state.className
      return React.createElement('div', {className: className, onClick: this.onClick})
    },
  
    onClick: function() {
      this.setState({className: 'baz'})
    }
  });
  </code></pre>
  
  <p>It works fine, but when I am rendering the app server side, I get the following error</p>
  
  <pre><code>Warning: getInitialState was defined on a component, a plain JavaScript class.
  This is only supported for classes created using React.createClass.
  Did you mean to define a state property instead?
  </code></pre>
  
  <p>My build step is setup like so</p>
  
  <pre class="lang-js prettyprint-override"><code>var Foo = require('./Foo');
  var factory = React.createFactory(Foo);
  module.exports = React.renderToString(factory({}));
  </code></pre>
  
  <p>Why is what I am doing wrong, and how should it be done?</p>