En primer lugar, creé este ejemplo antes para conectarme con la API.

 const enterprises = [ { address: 'Barueri, São Paulo', org_name: 'Innova', enterprise_name: 'Made Lab', footage: 'Possui 300m²', enterprise_type: 'Loteamento', quantity: 'Qnt. dispoíveis: 4', img_url: [ { key: 1, src: 'https://media.discordapp.net/attachments/462727233895661570/938506736065716294/unknown.png', }, { key: 2, src: 'https://media.discordapp.net/attachments/462727233895661570/938506703715053628/unknown.png', }, ], }, ];

Y también creé este componente de carrusel.

 import { useState } from 'react'; import { CarouselWrapper, Slide, ArrowLeft, ArrowRight } from './styled'; import P from 'prop-types'; const ImgCarousel = ({ slides }) => { const [current, setCurrent] = useState(0); const length = slides.length; const nextSlide = () => { setCurrent(current === length - 1 ? 0 : current + 1); }; const prevSlide = () => { setCurrent(current === 0 ? length - 1 : current - 1); }; if (!Array.isArray(slides) || slides.length <= 0) { return null; } return ( <CarouselWrapper> {slides.map((slide, index) => { return ( index === current && ( <Slide key={index} url={slide.image}> <ArrowLeft onClick={prevSlide} /> <ArrowRight onClick={nextSlide} /> </Slide> ) ); })} </CarouselWrapper> ); }; ImgCarousel.propTypes = { slides: P.array, }; export default ImgCarousel;

Sé que necesito desplazarme y obtener la longitud de la imagen y lo hice, pero tengo problemas para agregar las imágenes en el código detrás:

 <CardImg> // HERE <ImgCarousel src={img_url} key={} /> </CardImg>

¿Alguien me puede ayudar con eso?