I used the map method to render all the images. However, I need a way to track the current image index so that I can change the item description located in another div. Alternatively, if you have any other solutions, please let me know.
App.js :
import Carousel from 'react-bootstrap/Carousel';
import './style.css'
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import { useState } from 'react';
function App(props) {
return (
<Container>
<Row>
<Col>
<Carousel className='mycarousel'>
{
props.adem.map((element)=>(
<Carousel.Item key={element.id} id={element.id}>
<img
className="myImage"
src={element.images.url[0]}
alt="First slide"
/>
</Carousel.Item>
))
}
</Carousel>
</Col>
<Col>
</Col>
</Row>
</Container>
);
}
export default App;
As you can observe, the map method is responsible for rendering the images. However, I want to display the item description in an individual column separate from the slide.