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)

AryanJ-NYC AryanJ-NYC · Accepted Answer · 2020-07-14T03:37:17

Your testmapd is basically a React functional component. Treat it as such:

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>
)

react error: Functions are not valid as a React child

2 Answers