React-id-swiper: Dynamic Data

[yuqiusuo]

HI，thank you for making this useful tool，I have some problems

{list.map((item, index) => {
     return (
        <div key={index}>
            slide
        </div>
      )
    }) : null
}

but swiper doesn`t work，I can't drag it，please tell me how to solve this problem，thank you！

[gareys]

Do you have any console errors. Have you imported the swiper css stylesheet from node_modules?

[yuqiusuo]

There are no errors here，I have imported the swiper css from node_modules. I find that if code like the example will be ok，Have you ever used Array.map to create elements？

[gareys]

Yes, using Array.map is fine as long as your wrap the slides with a <div>. You are doing this correctly. What are you doing with : null on line 7 of your example?

[yuqiusuo]

that is needless code, I have deleted it , but it doesn`t work. I will try again. thanks a lot!

[gareys]

Can you provide your code? I don’t understand what you mean.

[Steffi3rd]

Found my solution after 2 hours.

For dynamic data, I have to use : rebuildOnUpdate: true.

Because I use {this.props.children}.
So the divs are read by Swiper but Swiper don't apply anything on them. It's like he receive the divs after the initialization...

So rebuildOnUpdate, do the job once.

[LennyLip]

@Steffi3rd How do you save navigation position?

[danedavid]

Set shouldSwiperUpdate={true}. Worked for me.