react-awesome-slider icon indicating copy to clipboard operation
react-awesome-slider copied to clipboard

AwesomeSlider fails to render children. Pushes it as a div with arguments!?

Open michaelcuneo opened this issue 5 years ago • 2 comments
trafficstars

Why does this fail?

I can render this S3Modal component individually, and on it's own it's fine... it will not render inside AwesomeSlider.

                  <AwesomeSlider>
                    {data.getPost.gallery.images.items.map(image => (
                      <S3Modal
                        imgKey={`public/${image.key}`}
                        width={400}
                        height={400}
                      />
                    ))}
                  </AwesomeSlider>

michaelcuneo avatar Jun 25 '20 10:06 michaelcuneo

This is my resulting div copied from Element Inspector.

<div class="awssld__content" imgkey="public/d56f8f10-8fed-4520-8f9c-2de8db9d1f97_c44fa038-3973-4290-93a9-36a7c1344330_Rewa-Wright_19Nov_2_Rewa%20Wright.png" width="400" height="400"></div>

michaelcuneo avatar Jun 25 '20 10:06 michaelcuneo

I had to enclose it in a div, and it worked like a charm. You would have to do:

                  <AwesomeSlider>
                    {data.getPost.gallery.images.items.map(image => (
                      <div>
                        <S3Modal
                          imgKey={`public/${image.key}`}
                          width={400}
                          height={400}
                        />
                      </div>
                    ))}
                  </AwesomeSlider>

daltonfury42 avatar Jul 12 '20 06:07 daltonfury42