Are you having trouble with the error “Functions are not valid as a React child. This may happen if you return a Component instead of Component from render“? Don’t worry. We are here to help you. We will give you some knowledge about the cause of this error and how to fix it in this article. Read on it.

How Does The Error “Functions are not valid as a React child. This may happen if you return a Component instead of Component from render” Happen?

The problem “Functions are not valid as a React child. This may happen if you return a Component instead of Component from render” happens due to some reasons:

1. A function reference is returned but not a component from render.
2. Instead of using  <Route path="/about" element={<About />} />, use React Router Routes as  <Route path="/about" element={About} />.

Look at the simple instance of this error below:

/** 
 * Error message: Functions are not valid as a React child. 
 * This may happen if you return a Component instead of <Component /> from render. 
 * Or you perhaps want to call this function instead of returning it. 
 */ 
const App = () => { 
  const getButton = () => { 
    return <button>Click</button>; 
  }; 

  // returning function not JSX element from render 
  return <div>{getButton}</div>; 
}; 
export default App;

The problem with the code excerpt is that our render method should be producing an actual JSX element, but instead, it is returning the getButton function.

How To Fix This Error “Functions are not valid as a React child. This may happen if you return a Component instead of Component from render”?

In this article, we give you some helpful solutions to solve the error “Functions are not valid as a React child. This may happen if you return a Component instead of Component from render”. Let’s follow them!

Solution 1: Call the function

The first solution we suggest for you to solve the error is to call the function as shown below:

const App = () => { 
  const getButton = () => { 
    return <button>Click</button>; 
  }; 

  // Return the actual button now 
  // To call the function, let's add parenthesis () 
  return <div>{getButton()}</div>; 
}; 
export default App;

The button element will be returned if you call the getButton function. After that, your error will be fixed.

Solution 2: Use NewHOC

Another way for you to solve the “Functions are not valid as a React child. This may happen if you return a Component instead of Component from render“ error is using NewHOC. This function merely takes a component as input and returns a new component that renders the input component. So, let’s apply this here. First, use this first as described below:

const NewComponent = NewHOC(Movie)

After that, use the following command to help you fix your problem.

<NewComponent someProp="someValue" />

Solution 3: Use the element prop

If an element is passed to a react router route like <Route path="/about" element={About} />, the errors also happens.

// incorrect syntax 
<Route path="/about" element={About} /> 

// correct syntax 
<Route path="/about" element={<About />} />

In react-router v6, you can use the element prop instead of supplying a child prop to the Route components, such as <Route path="/about" element={<About />} />. Make sure to supply the component that needs to be rendered for the given route as Component /> and not Component when using react-router.

Solution 4: Use an actual component as <Component /> and not Component

You must use an actual component as <Component /> and not Component if you attempt to render it.

const App = () => { 
  const Button = () => { 
    return <button>Click</button>; 
  }; 

  // Remember to use component as <Button />, not Button 
  return ( 
    <div> 
      <Button /> 
    </div> 
  ); 
}; 
export default App;

Conclusion

We hope you enjoy our article about the error “Functions are not valid as a React child. This may happen if you return a Component instead of Component from render“. With this knowledge, we know that you can fix your error quickly by following these steps! If you still have any other questions about fixing this syntax error, please leave a comment below. Thank you for reading!

Read more

→ Objects are not valid as a React child – How To Solve It?