How to Fix the “React Element Factories and JSX Warning” When Developing React Apps?

Sometimes, we may run into the "React Element Factories and JSX Warning" when we’re developing React apps.

In this article, we’ll look at how to fix the "React Element Factories and JSX Warning" when we’re developing React apps.

Fix the "React Element Factories and JSX Warning" When Developing React Apps

To fix the "React Element Factories and JSX Warning" when we’re developing React apps, we shouldn’t call function components directly.

For instance, don’t write anything like:

import MyComponent from 'MyComponent';

function render() {
  return MyComponent({ foo: 'bar' });
}

If we call MyComponent as a regular function, we’ll get the "React Element Factories and JSX Warning".

Instead, we should use the JSX syntax to render the component.

To do that, we write something like:

import MyComponent from 'MyComponent';

function render() {
  return <MyComponent foo="bar" />;
}

We can call the React.createFactory method to convert the function component into a function we can call.

To use it, we write:

import React from 'react';
import MyComponent from "MyComponent";
const MyComp = React.createFactory(MyComponent);

function render() {
  return MyComp({ foo: "bar" });
}

Also, we can create dynamic components by using the React.createElement with the function to render it:

import React from 'react';
import MyComponent from "MyComponent";

function render(MyComponent) {
  return React.createElement(MyComponent, { foo: 'bar' });
}

Conclusion

To fix the "React Element Factories and JSX Warning" when we’re developing React apps, we shouldn’t call function components directly.

We can call the React.createFactory method to convert the function component into a function we can call.