When to use getInitialState in a React Component

Question

I have a React component that switches className when I click on the component

 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 process the application server, 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 set up like this

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

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

Answer 1

I'm not sure if this helps, but when using fluxible, this is the syntax I used with JSX as part of the required component

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