framework7

Open full view…

How to add elements to Swiper?

rustemsadykov
Fri, 11 Aug 2017 21:57:23 GMT

I'm trying to add elements to existing Swiper component after receiving list from the server. But the Swiper component is adding only one child (it's letter "w" in my example) without posibility to swipe on it. Try this simple code based on Framework7 React App Template from documentation. Just replace the code in App.js file import React from 'react'; import { Framework7App, View, ContentBlockTitle, Views, Swiper, SwiperSlide, Button, Pages, Page } from 'framework7-react'; class MainViews extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); this.state = {swiper : [0,1,2,3,4,5,6]}; } handleClick() { this.setState(prevState => { return {swiper: prevState.swiper.concat(["w","x","y","z"])}; }); console.log(this.state); } render() { return ( <Views> <View> <Pages> <Page> <ContentBlockTitle>Swiper</ContentBlockTitle> <Swiper> {this.state.swiper.map( (value,key) => <SwiperSlide key={key}><img src="${key}.jpg" alt={value} /></SwiperSlide> )} </Swiper> <Button text='add elements' onClick={this.handleClick} /> </Page> </Pages> </View> </Views> ); } }; export const App = () => ( <Framework7App> <MainViews /> </Framework7App> );