Use Case : You get the following error message : react-dom.development.js:61 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

Test platform : Windows 10, Chrome, React 17

Exemple of Source code :


<html>
  <body>
    <div id="mydivtest">

      <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
      <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

      <script type="text/jsx">

        function MyHeader()
        {
	  return <h1>My Title H1</h1>;
	}

	// Capitalize the React Component
	ReactDOM.render(MyHeader, mydivtest);

     </script>    	
    </div>
  </body>
</html>

Solution : The line which give the warning is this one : ReactDOM.render(MyHeader, mydivtest); . For solving the problem you need to wrap the function name between bracket like html < />.

ReactDOM.render(<MyHeader />, mydivtest);

React uses JSX to render HTML and the return function inside the function render() should contain only HTML elements .

Annexe

Full error message

react-dom.development.js:61 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

Laisser un commentaire