React.js without JSX - “Warning: Something is calling a React component directly. Use a factory or JSX instead”

Question

I\'m trying to use React.js component without JSX and receive such warning:

Warning: Something is calling a React component directly. Use a factory or JSX instead.

Answer 1

React.createClass(spec) returns a component.

React.createElement(component, props, ...children) creates an element.

React.createFactory(component) returns a factory function, which can be used to create an element.

React.createFactory(a)(b, c, d) is the same as React.createElement(a, b, c, d).

You get the warning when you call a component directly, like component(). If you want to call it like a function, use createFactory

var factory = React.createFactory(component);
var element = factory(props, ...children);

Or use createElement:

var element = React.createElement(component, props, ...children);

In 0.13 this will give an error instead of a warning:

var element = component(props, ...children);

Also because React.DOM is going away, you should create dom elements the same way you create component based elements

^{Edit: looks like React.DOM is sticking around for now.}

var div = React.createFactory('div');
var element = div(props, ...children);

// or

var element = React.createElement('div', props, ...children);

_{Bold used to show consistent terms. ...children means any number of child arguments}

Answer 2

You need to wrap all of your child components in createFactory as well, I was able to get your code to run without that specific warning by wrapping Tag and Input in createFactory.

jsbin