Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

react error: Functions are not valid as a React child

Tags:

reactjs

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)

like image 688
nktoronto Avatar asked Oct 15 '25 16:10

nktoronto


1 Answers

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.

like image 169
Hyetigran Avatar answered Oct 18 '25 06:10

Hyetigran