Comments (8)
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
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.
Related Issues (20)
- InfiniteLoop Issue HOT 1
- Swipe speed HOT 2
- Thumb Images Can't Be Shown? HOT 3
- Autoscroll Mouse Down Expected Behavior? HOT 2
- NEXT 13.4.5: Uncaught TypeError: Super expression must either be null or a function, not undefined HOT 6
- Does the library support swiping with gestures? HOT 1
- Recalculate sizes when resize browser HOT 1
- Initially displaying wrong item and skipping next item on autoplay HOT 2
- If InfiniteLoop is true, it comes out from the end of data HOT 3
- height of carousel collapses after reaching the last image - what am I doing wrong? HOT 1
- How can i prevent vertical scroll on mobile? HOT 4
- [Ui]: Change the banner to an icon HOT 2
- Add indicatorContainer props to ease indicator positioning HOT 1
- Android/Firefox : Swiping on the last image make the gallery bug HOT 2
- Getting This localhost page canβt be found on yarn start HOT 1
- There is no way to remove 'role' attribute out of li or change li to another HTML elements from 'renderThumbs' props HOT 1
- Got an error when using with Astrojs in .astro file
- Transition time for Autoplay and Swipe
- onSwipeStart, onSwipeEnd and onSwipeMove don't work
- Carousel' cannot be used as a JSX component Error if using yarn2 pnp mode with typescript
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-responsive-carousel.