react.js ReactComponent does not offer setState()?

Question

I seem to misunderstand some fundamental parts of React.js.

In http://facebook.github.io/react/docs/component-api.html

it says, that a react component has methods like setState().

But when I do this:

var MyComp = React.createClass({

   getInitialState: function() {
      return {dummy: "hello"};
   },

   render: function() { return React.DOM.h1(null, this.state.dummy + ", world!") }
}

var newComp = MyComp(null);

React.renderComponent(newComp, myDomElement);
MyComp.setState({dummy: "Good Bye"}); // Doesn't work. setState does not exist
newComp.setState({dummy: "Good Bye"}); // Doesn't work either. setState does not exist

There is no setState() method to be found. But in the docs it says Component API, so what am I getting wrong here?

Answer 1

As per this blog post and this writeup, calling MyComp doesn't return an instance anymore, it returns a lightweight descriptor.

Anti-pattern:

var MyComponent = React.createClass({
  customMethod: function() {
   return this.props.foo === 'bar';
  },
  render: function() {
  }
});

var component = <MyComponent foo="bar" />;
component.customMethod(); // invalid use!

Correct usage:

var MyComponent = React.createClass({
  customMethod: function() {
   return this.props.foo === 'bar';
  },
  render: function() {
  }
});

var realInstance = React.renderComponent(<MyComponent foo="bar" />, root);
realInstance.customMethod(); // this is valid