When should I use getInitialState in a React component

Question

I have a React component that toggles a className when the component is clicked

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

It works fine, but when I am rendering the app server side, I get the following error

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?

My build step is setup like so

var Foo = require('./Foo');
var factory = React.createFactory(Foo);
module.exports = React.renderToString(factory({}));

Why is what I am doing wrong, and how should it be done?

Answer 1

I am not sure if this helps, but while using fluxible, this is the syntax i used with JSX as part of require component

var app = new Fluxible({
  component: React.createFactory(require('./Components/startup.react.jsx'))
});