I want to render a dynamic list of images all of them inside one carousel

Question

Hello Stack overflow community, Thank you in advance for the help I am a rather new to react native. For this project i have imported the library nuka-carousel. So what I am trying to do is to take in a dynamic list of images and place them into a carousel object. I am unsure of 1 how to fetch the data and 2 how to have a loop that would place them all into the same object. Right now I have it set up to take static inputs but I would like it to be dynamic.

This is what the image list data looks like

[{"id":4,"_meta":{"datasourceId":"97578cbb11844a92914b7ed8eb174929","tableId":"t_0sspte5yfnottg3npjqxbf7k5","id":4,"record":{"id":4,"c_dzp64j57b0pm6b8clmddapump":"test4","created_at":"2020-06-11T18:16:36.443Z","updated_at":"2020-06-11T18:16:36.443Z","c_55pk7oxu728xufdeh6st6fplh":{"url":"68ca15c0503a7bc6850d9e8f52d2e3a4302b75a00d6b6b48b759980f02f4ee56.gif","size":13473,"width":300,"height":300,"filename":"file.gif"},"_meta":{"datasourceId":"97578cbb11844a92914b7ed8eb174929","tableId":"t_0sspte5yfnottg3npjqxbf7k5","id":4}}}},{"id":3,"_meta":{"datasourceId":"97578cbb11844a92914b7ed8eb174929","tableId":"t_0sspte5yfnottg3npjqxbf7k5","id":3,"record":{"id":3,"c_dzp64j57b0pm6b8clmddapump":"test1","created_at":"2020-06-11T16:29:14.713Z","updated_at":"2020-06-11T18:15:24.949Z","c_55pk7oxu728xufdeh6st6fplh":{"url":"19cb397219e0e95d9a0ebc42de7d6012a9b5965b5eca112ef37f0ff374642c01.jpg","size":5557,"width":275,"height":183,"filename":"file.jpg"},"_meta":{"datasourceId":"97578cbb11844a92914b7ed8eb174929","tableId":"t_0sspte5yfnottg3npjqxbf7k5","id":3}}}},{"id":2,"_meta":{"datasourceId":"97578cbb11844a92914b7ed8eb174929","tableId":"t_0sspte5yfnottg3npjqxbf7k5","id":2,"record":{"id":2,"c_dzp64j57b0pm6b8clmddapump":"test2","created_at":"2020-06-11T16:29:04.801Z","updated_at":"2020-06-11T18:15:07.995Z","c_55pk7oxu728xufdeh6st6fplh":{"url":"75dcb52136d892cf5fad9637f650231fae1f33599739a99678517bf959a07ae9.jpg","size":7595,"width":284,"height":177,"filename":"file.jpg"},"_meta":{"datasourceId":"97578cbb11844a92914b7ed8eb174929","tableId":"t_0sspte5yfnottg3npjqxbf7k5","id":2}}}},{"id":1,"_meta":{"datasourceId":"97578cbb11844a92914b7ed8eb174929","tableId":"t_0sspte5yfnottg3npjqxbf7k5","id":1,"record":{"id":1,"c_dzp64j57b0pm6b8clmddapump":"test3","created_at":"2020-06-11T16:28:59.989Z","updated_at":"2020-06-11T18:15:15.956Z","c_55pk7oxu728xufdeh6st6fplh":{"url":"ec4bdfcb37766426fe5f22ee521556131233480f877f13c4c3716dca7c6a5d2b.jpg","size":5503,"width":168,"height":300,"filename":"file.jpg"},"_meta":{"datasourceId":"97578cbb11844a92914b7ed8eb174929","tableId":"t_0sspte5yfnottg3npjqxbf7k5","id":1}}}}]

I want to be able to put the urls from this data into carousel. This is the code I have now it is currently hardcoded. The list of images is called images

return (

                    <Carousel renderCenterLeftControls={false} renderCenterRightControls={false} renderCenterLeftControls={({ previousSlide }) => (
                        <button onClick={previousSlide}> <Icon name={button.Previcon} size={28} color={button.Prevcolor} /> </button>

                    )}   renderCenterRightControls={({ nextSlide }) => (
                        <button onClick={nextSlide}> <Icon name={button.Nexticon} size={28} color={button.Nextcolor} /> </button>



                    )}   defaultControlsConfig={{
            pagingDotsStyle: {
                fill: Indicator.Secondarypcolor,

            }
            }} >





                            <img src="https://images.squarespace-cdn.com/content/v1/5a5906400abd0406785519dd/1552662149940-G6MMFW3JC2J61UBPROJ5/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/baelen.jpg?format=1500w" />
                            <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide2" />
                            <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide3" />
                            <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide4" />
                            <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide5" />
                            <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide6" />
                        </Carousel>
                )

All of the carousel stuff works but I need to be able to put those urls inside the carousel but when I have tried to put a loop inside the tag it breaks.

score 0 · Answer 1 · answered Jun 11 '20 at 21:05

0

If I understand correctly, you want to map the array and return an image. I would do something like this:

arr.map((el) => <img alt='' src={el.url} />);

answered Jun 11 '20 at 21:05

Moshe M

91
1
1
8

Hello Moshe, Thank you for responding. So I am constructing a carousel object, inside of that object I can place multiple img tags inside the carousel tag, i want to be able to put loop through an array of img tags and place them all inside the carousel tag. I tried putting image.map((el) => ); inside the carousel tag but it seemed to crash, do I have to define el and what other steps mayb should i take? Thank you – potatoman Jun 11 '20 at 21:21

score 0 · Answer 2 · answered Jun 12 '20 at 05:29

Use the URL key properly from the object
Url must be a proper link
https://codesandbox.io/s/thirsty-gagarin-6isgf?fontsize=14&hidenavigation=1&theme=dark


import React from 'react';
import Carousel from 'nuka-carousel';

export default function App() {
  const images = [
    {
      id: 4,
      _meta: {
        datasourceId: '97578cbb11844a92914b7ed8eb174929',
        tableId: 't_0sspte5yfnottg3npjqxbf7k5',
        id: 4,
        record: {
          id: 4,
          c_dzp64j57b0pm6b8clmddapump: 'test4',
          created_at: '2020-06-11T18:16:36.443Z',
          updated_at: '2020-06-11T18:16:36.443Z',
          c_55pk7oxu728xufdeh6st6fplh: {
            url: 'https://via.placeholder.com/400/ffffff/c0392b/&text=slide2',
            size: 13473,
            width: 300,
            height: 300,
            filename: 'file.gif',
          },
          _meta: {
            datasourceId: '97578cbb11844a92914b7ed8eb174929',
            tableId: 't_0sspte5yfnottg3npjqxbf7k5',
            id: 4,
          },
        },
      },
    },
    {
      id: 3,
      _meta: {
        datasourceId: '97578cbb11844a92914b7ed8eb174929',
        tableId: 't_0sspte5yfnottg3npjqxbf7k5',
        id: 3,
        record: {
          id: 3,
          c_dzp64j57b0pm6b8clmddapump: 'test1',
          created_at: '2020-06-11T16:29:14.713Z',
          updated_at: '2020-06-11T18:15:24.949Z',
          c_55pk7oxu728xufdeh6st6fplh: {
            url:
              'https://images.squarespace-cdn.com/content/v1/5a5906400abd0406785519dd/1552662149940-G6MMFW3JC2J61UBPROJ5/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/baelen.jpg?format=1500w',
            size: 5557,
            width: 275,
            height: 183,
            filename: 'file.jpg',
          },
          _meta: {
            datasourceId: '97578cbb11844a92914b7ed8eb174929',
            tableId: 't_0sspte5yfnottg3npjqxbf7k5',
            id: 3,
          },
        },
      },
    },
    {
      id: 2,
      _meta: {
        datasourceId: '97578cbb11844a92914b7ed8eb174929',
        tableId: 't_0sspte5yfnottg3npjqxbf7k5',
        id: 2,
        record: {
          id: 2,
          c_dzp64j57b0pm6b8clmddapump: 'test2',
          created_at: '2020-06-11T16:29:04.801Z',
          updated_at: '2020-06-11T18:15:07.995Z',
          c_55pk7oxu728xufdeh6st6fplh: {
            url:
              '75dcb52136d892cf5fad9637f650231fae1f33599739a99678517bf959a07ae9.jpg',
            size: 7595,
            width: 284,
            height: 177,
            filename: 'file.jpg',
          },
          _meta: {
            datasourceId: '97578cbb11844a92914b7ed8eb174929',
            tableId: 't_0sspte5yfnottg3npjqxbf7k5',
            id: 2,
          },
        },
      },
    },
    {
      id: 1,
      _meta: {
        datasourceId: '97578cbb11844a92914b7ed8eb174929',
        tableId: 't_0sspte5yfnottg3npjqxbf7k5',
        id: 1,
        record: {
          id: 1,
          c_dzp64j57b0pm6b8clmddapump: 'test3',
          created_at: '2020-06-11T16:28:59.989Z',
          updated_at: '2020-06-11T18:15:15.956Z',
          c_55pk7oxu728xufdeh6st6fplh: {
            url:
              'ec4bdfcb37766426fe5f22ee521556131233480f877f13c4c3716dca7c6a5d2b.jpg',
            size: 5503,
            width: 168,
            height: 300,
            filename: 'file.jpg',
          },
          _meta: {
            datasourceId: '97578cbb11844a92914b7ed8eb174929',
            tableId: 't_0sspte5yfnottg3npjqxbf7k5',
            id: 1,
          },
        },
      },
    },
  ];

  const slides = images.map((el, index) => (
    <img
      src={el._meta.record.c_55pk7oxu728xufdeh6st6fplh.url}
      alt={`Slide ${index + 1}`}
    />
  ));

  return (
    <div style={{width: '50%', margin: 'auto'}}>
      <Carousel>{slides}</Carousel>
    </div>
  );
}

I want to render a dynamic list of images all of them inside one carousel

2 Answers2