Error: type should not be null (Using map function) about react-responsive-carousel HOT 8 CLOSED

Alrighty, for everyone else having this error, apparently you HAVE to do
import {Carousel} from 'react-responsive-carousel';

Sadly, this is followed by this error: TypeError: item.props.children.filter is not a function

from react-responsive-carousel.

Just FYI: Could be that this issue is created by something similar to this: FormidableLabs/nuka-carousel#172

from react-responsive-carousel.

Closing as it was only a wrong import.

from react-responsive-carousel.

FYI I'm getting a similar issue now..
"TypeError: Cannot read property 'type' of null at"

This traces back to Thumbs.js.
https://github.com/leandrowd/react-responsive-carousel/blob/master/src/components/Thumbs.js#L112

It refuses to see as a type

My code:

                <Carousel infiniteLoop showIndicators={false} showStatus={false} >
                    {(data.product.previews) && data.product.previews.map((preview, idx) => (
                        (preview.type === 'file' && idx == 2) ? (
                            <img src='http://www.pepitastore.com/public/assets/1614900/sample/2cab9e6a2028e96fcef90c44ec66f7c7.jpg' />
                        )
                        :
                        (false)
                    ))}
                </Carousel>

driving me bananas. 🍌

from react-responsive-carousel.

Have you tried putting braces around your arrow function in map and debugged what actually is in the preview object? Are you sure you provide it with the correct values? Also I'm not sure about using the ? operator here and providing a false in the case it's not what you think it is. I'd try to find a better way around this.

from react-responsive-carousel.

@akuji1993 Ok thanks. I cleaned up my test case and yeah false isn't what I want. It seems you can't return any falsey value in that loop without react-responsive-carousel blowing up though, I'm not sure that's right. You should be able to drop stuff that you don't want within the loop.

Thanks for the input! :)

from react-responsive-carousel.

I agree that it should have a fallback behaviour, but I can also understand not supporting this in the way that you expected it would. Happy to hear that you found the issue though!

The easier way to do this I think is to check your values before putting them in Carousel and letting Carousel only show up when all values are for sure correct.

from react-responsive-carousel.

Hi @Plonko, if you want to filter items out you need to use filter before map. Alternatively, you can return null instead of false and React will understand but I don't think that's what you want.

from react-responsive-carousel.