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

You should understand the React component creation steps. We can’t call the component directly like component(). The above warning message is for this type of approach. If you want to call a component as a function, then create a createFactory() method.

You can use a component in two way.

1. React.createElement(component, props, …children)
Call a component create methods using React.createElement() method.

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

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

var factory = React.createFactory(component);
var element = factory(props, ...children);
var divFact = React.createFactory('div');
var component = divFact({id:'sample', className:'sample'}, ...children);

// or

var component = React.createElement('div', {id:'sample', className:'sample'}, ...children);

Leave a Reply

Your email address will not be published. Required fields are marked *