How to fix “Functions are not valid as a React child” error?

Posted on by Nathaniel Kirk
Functions are not valid as a React child error

This article will show you what causes it and how to fix the “Functions are not valid as a React child error” error in a basic way, like returning the whole function or adding the tag of the function.

Why does the “Functions are not valid as a React child” error happen?

Before fixing this error, we must understand why this error occurs. A functional component is a Javascript (or ES6) function that returns 1 element/1 React element.

One of the reasons for this error is that you add the Function component in the wrong way, and the program will show the error, so how can it be fixed? Let’s see how to solve it with an example below.

How to fix this error?

Return the whole function method

In this way, you will fix the error if you import the function component but only import a part of the component, so it will show an error like the one below and not render it to the screen.

Code:

import React from 'react';
import { Button } from './Button';
 
const App = () => {
  return (
    <div>
      <h2>Functions are not valid as a React child error | LearnShareIT </h2>
      <div>
        {Button}
      </div>
    </div>
  );
};
 
export default App;
export function Button() {
  return <button>Click me!!</button>;
}

Output:

If you edit the code using the Button in the App file like the code below, the program will typically run again.

Code:

import React from 'react';
import { Button } from './Button';
 
const App = () => {
  return (
    <div>
      <h2>Functions are not valid as a React child error | LearnShareIT</h2>
      <div>
        {Button()}
      </div>
    </div>
  );
};
 
export default App;

So when you add brackets() after the function, the program will understand that you return the whole function.

Add the tag of function method

In the case of this error, we will reuse the components above, but the App file will only return the function component Button.

Code:

import { Button } from "./Button";
 
const App = () => {
  return Button;
};
 
export default App;

Output:

Why is the program still showing the same error? Let’s pay attention to how the Button function is used. Let’s add the <> tag at the beginning and end to see if there is a difference.

Code:

import { Button } from "./Button";
 
const App = () => {
  return <Button/>;
};
 
export default App;

So when putting the function in the tag, the program recognized it as a valid React child and successfully rendered it. Good luck!

Summary

To summarize, we have gone through some ways to fix the “Functions that are not valid as a React child” error, but you should use the method of adding tags to make it easier to track and debug.

Maybe you are interested:

Related Posts

Leave a Reply

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