react error: Functions are not valid as a React child

Question

I m trying to render a list output from MAP. Whats it is I am coding wrong to get this error?

import React from 'react';


function Testmap2() {
    
const list = [
    {
        id: 'a',
        firstname: 'Robin',
        lastname: 'Wieruch',
        year: 1988,
    },
    {
        id: 'b',
        firstname: 'Dave',
        lastname: 'Davidds',
        year: 1990,
    },
];


 
    const testmapd = () => (
        <ul>
            {list.map(item => (
                <li key={item.id}>
                    <div>{item.id}</div>
                    <div>{item.firstname}</div>
                    <div>{item.lastname}</div>
                    <div>{item.year}</div>
                </li>
            ))}
        </ul>
    );

    return (
        <div>
            {testmapd}
        </div>
    )
}
export default Testmap2;

Error: 1.chunk.js:77900 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. in div (at Testmap2.jsx:37) in Testmap2 (at src/index.js:13) in StrictMode (at src/index.js:11)

Answer 1

You need to call your function

<div>
   {testmapd()}
</div>

const testmapd is a variable that is referencing the arrow function you defined(ES6)

If you were to console.log testmapd, it would print the function body because that is what the variable is pointing to. When you add () after the function, it gets invoked/runs and returns something.

In your case, you didn't want the function definition, but the statement your function returns.