React props.children including null values

Question

I have a child component, where I am rendering the content passed as children from the Parent component, where some elements are conditional rendered. So when I am trying to access the props.children do a modification I am getting null and false values( which elements are conditional rendered) in props.children. How to remove them.

StackBlitz URL - https://stackblitz.com/edit/react-2nfdbc?file=src/App.js

Answer 1

you can do something like children.filter((c) => !!c) but react is usually able to handle false, null and undefined and properly ignore them.