Как создать carusel на React?

Question

[brainexplosion]

Я использую React-Bootstrap для создания Carusel. Вот код:

import React, { Component } from 'react';
import "./index.css";
import { Carousel} from 'react-bootstrap';



class ControlledCarousel extends React.Component {
	constructor(props, context) {
	  super(props, context);
  
	  this.handleSelect = this.handleSelect.bind(this);
  
	  this.state = {
		index: 0,
    direction: null, 
	  };
	}
  
	handleSelect(selectedIndex, e) {
	 
	  this.setState({
		index: selectedIndex,
		direction: e.direction
	  });
	}
  
	render() {
	  const { index, direction } = this.state;
  
	  return (
	     <Carousel
        activeIndex={index}
        direction={direction}
        onSelect={this.handleSelect}
       >
        <Carousel.Item>
          <img width={900} height={500} alt="900x500" src={this.state.img} />
          <Carousel.Caption>
            <h3>First slide label</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img width={900} height={500} alt="900x500" src={this.state.img} />
          <Carousel.Caption>
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img width={900} height={500} alt="900x500" src={this.state.img} />
          <Carousel.Caption>
            <h3>Third slide label</h3>
            <p>
              Praesent commodo cursus magna, vel scelerisque nisl consectetur.
            </p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
	  );
	}
  }
  

export default ControlledCarousel;

Вопрос вот в чем: как создать массив картинок и по ключу вывести их, а не прописывать каждую картинку в src?

Answer 1

[Антон Спирин]

Lists and keys

<Carousel
  activeIndex={index}
  direction={direction}
  onSelect={this.handleSelect}
>
  {items.map((item, index) => (
    <Carousel.Item key={index}>
      <img width={900} height={500} alt="900x500" src={item.src} />
      <Carousel.Caption>
        <h3>{item.label}</h3>
        <p>{item.caption}</p>
      </Carousel.Caption>
    </Carousel.Item>
  ))}
</Carousel>

Comments

[brainexplosion]

К сожалению, выводится ошибка

[Антон Спирин]

brainexplosion, скобочку одну закрывающую забыл. Код не проверял. В том месте, где подсвечивает добавьте закрывающую скобку. Ответ поправил.

[brainexplosion]

Антон Спирин, спасибо, сработало) Но вместо "src={item.src}", нужно было написать "src={item}". Без этого не отображались картинки.

[Антон Спирин]

brainexplosion, ну смотрите у вас же там еще описание должно быть я писал пример полагая, что структура будет такая:

const items = [
  {
    src: 'путь к картинке',
    label: 'First slide label',
    caption: 'Nulla vitae elit libero, a pharetra augue mollis interdum.',
  },
  /* ... */
]

[brainexplosion]

Антон Спирин, В таком случае, вообще все прекрасно)