Functions are not valid as a React child. This may happen if you return a Component instead of <Component> from render

Question

<script type="text/babel">
    const rootElement = document.getElementById("root");

    const Element = (firstName, lastName) => {
        <div>
            Hello, {firstName} {lastName}
        </div>;
    };

    <Element firstName="John" lastName="Doe" />;

    ReactDOM.render(Element, rootElement);
</script>

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.

Answer 1

You are missing {} in "firstName, lastName" and return the div

<script type="text/babel">
    const rootElement = document.getElementById("root");

    const Element = ({firstName, lastName}) => (
        <div>
            Hello, {firstName} {lastName}
        </div>;
    );

    ReactDOM.render(<Element firstName="John" lastName="Doe" />, rootElement);
</script>

Answer 2

First - If you use curly braces {} with arrow function in you Element component, you need to use return keyword. Or, use first bracket () instead of curly braces.

Second - you needn't write this line <Element firstName="John" lastName="Doe" />, instead write this line inside ReactDOM.render. Or, store this in a variable and pass it inside ReactDOM.render.

<script type="text/babel">
    const rootElement = document.getElementById("root");

    const Element = (firstName, lastName) => (
        <div>
            Hello, {firstName} {lastName}
        </div>;
    );

    ReactDOM.render(<Element firstName="John" lastName="Doe" />, rootElement);
</script>