react-awesome-slider
react-awesome-slider copied to clipboard
AwesomeSlider fails to render children. Pushes it as a div with arguments!?
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>
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>
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>