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. See: http://fb.me/react-legacyfactory

I've visited link but suggested createFactory solution didn't help me :/

app.js

var React = require('react/addons');
var TagsInput = React.createFactory(require('./tagsinput')); // no luck

var TagsComponent = React.createClass({
  displayName: "TagsComponent",
  saveTags: function () {
    console.log('tags: ', this.refs.tags.getTags().join(', '));
  },

  render: function () {
    return (
      React.createElement("div", null,
        React.createElement(TagsInput, {ref: "tags", tags: ["tag1", "tag2"]}),
        React.createElement("button", {onClick: this.saveTags}, "Save")
      )
    );
  }
});

React.render(React.createElement(TagsComponent, null), document.getElementById('tags'));

tagsinput.js

https://raw.githubusercontent.com/olahol/react-tagsinput/master/react-tagsinput.js

I cannot figure out what is the problem here?

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