DEV Community 👩‍💻👨‍💻

DeChamp
DeChamp

Posted on

React.Children.map returns null when I have children (jsx)

Well this one was a fun one, NOT!

I just spent so much time debugging something that is so simple and I should have known from a hundred other times of doing it right.

The issue is you go to use React.Children.map and you pass valid children, yet you still get an empty array.

You may see the error in the console log, "Functions are not valid as a React child."

At this point, you should be looking at your passed children to make sure you wrapped them in angle brackets so that it's a valid JSX Element.

Wrong! Missing angle brackets.
Wrong solution

vs

Correct!
correct solution

Top comments (2)

Collapse
 
mezieb profile image
Okoro chimezie bright

Nice that's helpful

Collapse
 
dechamp profile image
DeChamp Author

happy it helped you out!

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post