Allow "nullish" children

[paulobmarcos]

Issue

While using react-carousel, I found a problem trying to render conditional children:

<Carousel>
    { condition && <div>hello</div> }
    <div>world</div>
</Carousel>

I found the problem to be related with the render method of the Carousel:

 {React.Children.map(children, (child, i) => (
     React.cloneElement(child, {
         ...child.props,
         ...
    })
))}

We are trying to access the props of a child that is nullish.

Solution

A solution to this problem would be to use the toArray method provided by React.Children that will filter out null children.

Like this:

 {React.Children.toArray(children).map((child, i) => (
     React.cloneElement(child, {
         ...child.props,
         ...
    })
))}

Note

I tried to commit the change to a branch but I seem to have no permissions.

Thanks 🙏 @satazor @jgradim

[jgradim]

Nice catch @paulobmarcos! PR is up at https://github.com/moxystudio/react-carousel/pull/25

[jgradim]

@paulobmarcos released @moxy/react-carousel@0.1.9