Comments (4)
Hi @renatogalvones , I could see where is the problem here . But I still don't know why u guys need to use same key for both wrapper div and CardReview
. What is the benefit of using the same key for <div key='item.id'><CardReview key='item.id'.... /></div>
? It will be very helpful, if u guys can put a reference link for this :)
I always use key only for root element in loop like
function CardSlider({ params, slides, Swiper, updateSliderDimensions }) {
if (slides.length <= 0 || !Swiper) return false;
const renderItem = item => {
return (
<div key={item.id}>
<CardReview {...item} updateSliderDimensions={updateSliderDimensions} />
</div>
)
}
return (
<Swiper {...params}>
{ slides.map(renderItem) }
</Swiper>
);
}
Thanks :)
from react-id-swiper.
@kidjp85 actually, we don't have to use. Your solution is better.
from react-id-swiper.
Hi @sergiokopplin , can u show me ur code for swiper. I wanna see how u render you children component :) . And thanks for your suggestion too. I will be great if u can make a PR for this :)
from react-id-swiper.
Hello @kidjp85 !
Thanks for making this awesome "proxy". Saved a lot of hard work here. =]
Here's how our code is implemented:
function CardSlider({ params, slides, Swiper, updateSliderDimensions }) {
if (slides.length <= 0 || !Swiper) return false;
slides.forEach((item) => {
const cardReview = (
<CardReview
{...item}
key={item.id}
updateSliderDimensions={updateSliderDimensions}
/>
);
sliderItems.push(<div key={item.id}>{cardReview}</div>);
});
return (
<Swiper {...params}>
{ sliderItems }
</Swiper>
);
}
This code is part of our "dumb" component which is responsible for only the rendering part.
We are requiring the Swiper on the componentWillMount on the "smart" component and passing it by props to the "dumb" one.
And as the React documentation suggests we are using the same id on the div and the CardReview.
from react-id-swiper.
Related Issues (20)
- keyboard not working properly on Safari
- Question: Controlled swiper HOT 3
- How to get the Current Index of the Slider ? HOT 6
- LazyLoading not working
- breakpoints not working HOT 1
- import swiper not working HOT 9
- No rtl support HOT 3
- How to get/create instance after destroyed swiper? HOT 1
- react router reload page after loop image
- Vertical Mode is not working properly HOT 1
- The examples codesandboxes are very confusing HOT 2
- Module not found: Can't resolve 'react-id-swiper/src' in 'C:\Users\cheta\React-applications\landing-page\src\components'
- How to make autoplay this swiper
- Module not found: Error: Package path ./css/swiper.css is not exported from package C:\Users\Lenovo\Documents\programacion\portfolio\portfolio\node_modules\swiper (see exports field in C:\Users\Lenovo\Documents\programacion\portfolio\portfolio\node_modules\swiper\package.json) HOT 2
- Two-way Control not working
- How to use pagination arrows outside the swiper wrapper?
- How can I create Infinite Slider ?
- slidesOffsetAfter δΈηζ
- Error in Next 13 / App
- Getting Error while using with next v13
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-id-swiper.