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.