React boostrap carousel not working when using array.map function in react

Question

I'm trying to create a simple carousel using react Bootstap but it seems not to work. The code below doesn't work

function CarouselItem({ item }) {

 return (
   <Carousel.Item>
  <img
    className="d-block w-100"
    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQom33pPRha3xPSmmGVI5zaqSiraDxb_KuMKvmIOnfQb3rbHZZKJ8wxRGttgjfDpQ3cKrQ&usqp=CAU"
    alt="First slide"
  />
  <Carousel.Caption>
    <h3>{`${item} slide label`}</h3>
    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
  </Carousel.Caption>
</Carousel.Item>
 );
}

function App() {
    return (
     <div className="App">
  <Carousel>
    {[1, 2, 3, 4, 5, 6].map((item) => {
      return <CarouselItem key={item} item={item} />;
    })}
  </Carousel> 
</div>
 );
}

but this code works very fine. Is there a way i can make the first code work? Because I have to fetch data in the CarouselItem component for each item before i render it that is why I want to use the first approach.

function App() {
  return (
    <div className="App">
  {/**but this way works**/}
  <Carousel>
    {[1, 2, 3, 4, 5, 6].map((item) => {
      return (
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQom33pPRha3xPSmmGVI5zaqSiraDxb_KuMKvmIOnfQb3rbHZZKJ8wxRGttgjfDpQ3cKrQ&usqp=CAU"
            alt="First slide"
          />
          <Carousel.Caption>
            <h3>{`${item} slide label`}</h3>
            <p>
              Nulla vitae elit libero, a pharetra augue mollis interdum.
            </p>
          </Carousel.Caption>
        </Carousel.Item>
      );
    })}
  </Carousel> 
</div>
 );
}

you can find the sandbox code here sandbox code

ldruskis · Accepted Answer · 2022-02-03 10:54:41Z

1

Pretty sure this would work

<Carousel>
 {[1, 2, 3, 4, 5, 6].map((item) => {
   return <Carousel.Item key={item}>{item}</Carousel.Item>;
 })}
</Carousel>

In React-Bootstrap docs I cannot find property item for <Carousel.Item />, you must pass children instead.

edited Feb 3, 2022 at 10:54

answered Feb 3, 2022 at 10:43

ldruskis

7998 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Moro Owusu Afriyie Over a year ago

@Idruskis it works but i don't see the images, i only see the item number.

ldruskis Over a year ago

You must add image inside Carousel Item, now you're just mapping numbers and trying to render a number. Try to create array of images and instead render them.

ldruskis Over a year ago

In your second example "that works" you use <img /> inside Carousel.Item, here an example how you could do it

Moro Owusu Afriyie Over a year ago

@Idruskis thanks but in my case, i will make a call to an api to get an image in the CarouselItem component in a useEffect hook and get the data for that particular item. the numbers used can be represented as an id to make the api calls to with that particular id. that's how i want to do it but it doesn't work

ldruskis Over a year ago

Ok. So create your custom Image renderer component, pass id to it via props, fetch in useEffect and return the content. Use this custom component inside of Carousel.Item.

|

Collectives™ on Stack Overflow

React boostrap carousel not working when using array.map function in react

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related