React.js Without Jsx - "warning: Something Is Calling A React Component Directly. Use A Factory Or Jsx Instead"

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

Solution 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

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

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

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

Solution 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

Solution 3:

For me. The culprit is recompose. I want to convert my functional component to pure. Then I solved it by using memo.

Using memo from react:

importReact, { memo } from'react';

constComponent = (props) {
return (
// Component code
)
}

// Wrap component using "memo" HOCexportdefaultmemo(Component);
Using pure fromrecompose:

importReactfrom'react';
import { pure } from'recompose';

constComponent = (props) {
return (
// Component code
)
}

// Wrap component using "pure" HOCexportdefaultpure(Component);