Swiper renderExternal example in Virtual Slides with React - reactjs

Question

Need to render a Custom React component array as Virtual Slides using Swiper.
Document says renderExternal can be used for this but there's no example in the API doc http://idangero.us/swiper/api/#virtual
Need to know on how this can be done using renderExternal function.

Answer 1

I'm not sure that's the best way to do it, but that is roughly how I did :
const mySwiper = new Swiper('.swiper-container', {
virtual: {
slides: this.props.array (or this.state.array)
renderExternal: function(data){}
}
})
then you display your component in the template :
<div className="swiper-container">
<div className="swiper-wrapper">
<MyComponent
myProps="mySwiper.virtual.slides[mySwiper.activeIndex]"
/>
</div>
</div>
(I did it with Vue, not React)

Answer 2

The documentation got updated and now you can find an example of how to use it with React. For reference, here is the example that is given:
import React from 'react';
import Swiper from 'swiper/dist/js/swiper.esm.bundle';
export default class extends React.Component {
constructor() {
this.state = {
// dummy slides data
slides: (function () {
var slides = [];
for (var i = 0; i < 600; i += 1) {
slides.push('Slide ' + (i + 1));
}
return slides;
}()),
// virtual data
virtualData: {
slides: [],
},
}
}
componentDidMount() {
const self = this;
const swiper = new Swiper('.swiper-container', {
// ...
virtual: {
slides: self.state.slides,
renderExternal(data) {
// assign virtual slides data
self.setState({
virtualData: data,
});
}
},
});
}
render() {
{/* ... */}
<div className="swiper-container">
<div className="swiper-wrapper">
{/* It is important to set "left" style prop on every slide */}
{this.state.virtualData.slides.map((slide, index) => (
<div className="swiper-slide"
key={index}
style={{left: `${virtualData.offset}px`}}
>{slide}</div>
))}
</div>
</div>
{/* ... */}
}
}