El componente carrusel es un componente que se representa en un componente diferente que tiene su estado y método de representación debajo del componente carrusel. el problema es que el mapeo de state.carousel no puede representar el contenido en la página. Intenté usar el método foreach y tampoco me funcionó... ayúdenme, por favor.

 import { Carousel } from "react-bootstrap"; class CarouselComponent extends React.Component { state = { carouselHeading: [ "First slide label", "First slide label", "First slide label", ], carouselParag: [ " Lorem ipsum dolor sit amet, consectetur adipiscing elit.", " Lorem ipsum dolor sit amet, consectetur adipiscing elit.", " Lorem ipsum dolor sit amet, consectetur adipiscing elit.", ], }; render() { return ( <> <Carousel.Item interval={this.props.delay}> <img className="d-block w-100" src={this.props.src} alt={`slide ${this.props.index}`} /> <Carousel.Caption> <h3>{this.state.carouselHeading[this.props.index]}</h3> <p>{this.state.carouselParag[this.props.index]}</p> </Carousel.Caption> </Carousel.Item> </> ); } } export default CarouselComponent;

a continuación se muestra el componente en el que se ha representado carruselComponent, pero el problema es... el código se ha representado perfectamente en las herramientas de los desarrolladores, el contenido del carrusel no se muestra en absoluto##

 state={ src:carousel:["https://images.unsplash.com/photo-1621619856624-42fd193a0661?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1158&q=80", "https://images.unsplash.com/photo-1621619856624-42fd193a0661?ixlib=rb1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1158&q=80", ] } render(){ return( <Container className="carouselContent"> <Row> <Col> <Carousel> {this.state.src.carousel.map((element, index) => { console.log("carouselComponent responded", element); return ( <CarouselComponent delay={index === 0 ? 10000 : 500} src={element} index={index} key={index} /> ); })} </Carousel> ) }