I am currently developing a slideshow feature in a React component that will display a random image along with its associated title either when the page loads or when the user clicks on the next button within the slideshow. In order to achieve this, I have created an array of objects containing image URLs and titles. However, I am struggling to write the necessary function that will select a random image from the array and then correctly display both the image and its title. Here is my progress so far, although I am unsure of how to proceed further. Any assistance would be greatly appreciated!
import React, { Component } from "react";
import "../styles/slideshow.css";
export default class Slideshow extends Component {
images = [
{
headline: "Title 1",
link:
"www.example1.com"
},
{
headline: "Title 2",
link:
"www.example2.com"
},
{
headline: "Title 3",
link:
"www.example3.com"
}
];
displayRandomImage = () => {
let index = Math.floor(Math.random() * 3);
};
render() {
return (
<div>
<div id="slideshow" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block" src={} alt="First slide" />
</div>
</div>
<a
class="carousel-control-prev"
href="#carouselExampleControls"
role="button"
data-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a
class="carousel-control-next"
href="#carouselExampleControls"
role="button"
data-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
);
}
}