I have a reactJS cards ponent which fetches data from strapi and then I am implementing react-id-swiper with the dynamic cards which are built on the go. Now react-id-swiper is working fine if I hardcode the cards. But is not working with the logic. I am pasting the code for the cards.
`import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './desktop-card.module.css';
import Swiper from 'react-id-swiper';
import 'swiper/css/swiper.css';
const params = {
direction: 'horizontal',
loop: true,
slidesPerView: 'auto',
mousewheel: true,
autoPlay: {
delay: 2000
}
}
const Cards = props => {
const singleCard = props.cardsData.map((card, index) => {
return (
<React.Fragment key={index}>
<div className="scene scene--card swiper-slide">
<div className="mojo-card d-flex flex-column" style={{backgroundColor:card.backgroundColor}}>
<h3 className="heading py-4 px-4">{card.heading}</h3>
<p className="card-content px-4">{card.content}</p>
<div className="mojo-card__img card-img-data">
<img alt={'image'+card.id}/>
</div>
</div>
</div>
</React.Fragment>
)
});
return <React.Fragment>{singleCard}</React.Fragment>
}
class DeskTopCards extends Component {
render() {
const { cardsData } = this.props;
if(!this.props) return null;
return (
<Swiper {...params}>
<Cards cardsData={cardsData}/>
</Swiper>
)
}
}
export default DeskTopCards;
`
Please help. I am new to ReactJS.
Here is the parent ponents code. The cardsData is not empty.
```
import React from 'react';
import ReactDOM from 'react-dom';
import DesktopCards from './Desktop-card/desktop-card';
class CardContainer extends React.Component {
state = {
data: []
}
ponentDidMount() {
const url = '';// strapi url
fetch(url)
.then(result => result.json())
.then(result => {
this.setState({
data: result
});
});
}
render() {
const { data } = this.state;
return (
<div className="col-lg-7 col-md-7 px-0 box d-flex w-100 flex-row align-items-center justify-content-center right-side-scroll">
<DesktopCards cardsData={data}/>
</div>
)
}
}
export default CardContainer;
```
I have a reactJS cards ponent which fetches data from strapi and then I am implementing react-id-swiper with the dynamic cards which are built on the go. Now react-id-swiper is working fine if I hardcode the cards. But is not working with the logic. I am pasting the code for the cards.
`import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './desktop-card.module.css';
import Swiper from 'react-id-swiper';
import 'swiper/css/swiper.css';
const params = {
direction: 'horizontal',
loop: true,
slidesPerView: 'auto',
mousewheel: true,
autoPlay: {
delay: 2000
}
}
const Cards = props => {
const singleCard = props.cardsData.map((card, index) => {
return (
<React.Fragment key={index}>
<div className="scene scene--card swiper-slide">
<div className="mojo-card d-flex flex-column" style={{backgroundColor:card.backgroundColor}}>
<h3 className="heading py-4 px-4">{card.heading}</h3>
<p className="card-content px-4">{card.content}</p>
<div className="mojo-card__img card-img-data">
<img alt={'image'+card.id}/>
</div>
</div>
</div>
</React.Fragment>
)
});
return <React.Fragment>{singleCard}</React.Fragment>
}
class DeskTopCards extends Component {
render() {
const { cardsData } = this.props;
if(!this.props) return null;
return (
<Swiper {...params}>
<Cards cardsData={cardsData}/>
</Swiper>
)
}
}
export default DeskTopCards;
`
Please help. I am new to ReactJS.
Here is the parent ponents code. The cardsData is not empty.
```
import React from 'react';
import ReactDOM from 'react-dom';
import DesktopCards from './Desktop-card/desktop-card';
class CardContainer extends React.Component {
state = {
data: []
}
ponentDidMount() {
const url = '';// strapi url
fetch(url)
.then(result => result.json())
.then(result => {
this.setState({
data: result
});
});
}
render() {
const { data } = this.state;
return (
<div className="col-lg-7 col-md-7 px-0 box d-flex w-100 flex-row align-items-center justify-content-center right-side-scroll">
<DesktopCards cardsData={data}/>
</div>
)
}
}
export default CardContainer;
```
- This works for me. Are you passing the cardsData prop to DesktopCards? Can you paste your other code where you used the DesktopCards? – OT413 Commented Jan 14, 2020 at 10:25
- Are you sure that cardsData actually has a value and is not always null? – OT413 Commented Jan 14, 2020 at 10:34
- I have added the parents ponent code. cardsData has value. – Vinay M S Commented Jan 14, 2020 at 10:56
- Still works for me. What about desktop-card.module.css? Can you post that? – OT413 Commented Jan 15, 2020 at 12:18
- Swiper works. But, few options like autoplay, loop are not working. – Vinay M S Commented Jan 15, 2020 at 16:00
3 Answers
Reset to default 3It might be too late but I stumbled on this as well. The trick is in the documentation but it's quite easy to miss. Image from the documentation on github Which means that for any custom ponent you need to wrap it up with an html element such as div. So for example:
<Swiper>
<div><Card1/></div>
<div><Card2/></div>
<div><Card3/></div>
</Swiper>
Kind of sucks to do this but if it's necessary for you to use the library, that should do it.
I was trying examples from https://react-id-swiper.ashernguyen.site/ which is not working fine on my local even i gone through their code in sandbox which works there.
After a some analysis i suspected some css were missed in swiper 6.1.2, Hence I degraded swiper version to 5.3.8
That works for me, Tried few examples It's working fine on my machine.
package.json
"react-id-swiper" : "^4.0.0",
"swiper" : "5.3.8"
I guess react-id-swiper doesn't work correctly with <React.Fragment>.
remove <React.Fragment> from your code and test it again.
I had this problem with react-id-swiper when I removed , fixed my problem.