ReactJS children - filter out null values

Question

I'm rendering my components with:

<PanelGroup>
    {this.renderPanel1()}
    {this.renderPanel2()}
    {this.renderPanel3()}
</PanelGroup>

Now one of my panels is only available if its available-property is set to true. The render()-method otherwise returns null.

My <PanelGroup> should add a divider on the bottom of all elements except in the last element.

I tried to accomplish that with the following code, but because even if panel2 is returning null, the divider is still added, and the code won't work.

How can I filter out all my panels which are returning null? :)

<div>
   {React.Children.map(
       React.Children.toArray(props.children),
           (child: React.ReactElement<PanelProps>, i) => {
               return (
                     <div>
                        {React.cloneElement(child as React.ReactElement<PanelProps>, child.props)}
                        {/*Add divider after all elements except last*/}
                        {i < React.Children.count(props.children) -1 && <Divider/>}
                     </div>
                )
           }
        )}
</div>

Answer 1

You have to take advantage of Array.filter():

const MyComponent = ({ children }) => {
  // This filter will return only not null values
  const children = React.Children.toArray(children).filter(Boolean);
  
  // return ...
};

Working example:

const array = [1,2,3,null,4,null,5,null];
console.log(array.filter(Boolean));