React Js Change Image Every 5 Seconds
React Js Change Image Every 5 Seconds:Changing images dynamically in a React.js application can enhance user experience and add visual appeal to your website. In this tutorial, we will create a React component that automatically switches between a predefined set of images every 5 seconds. We'll go through the code you provided and explain how it works step by step
Thanks for your feedback!
Your contributions will help us to improve service.
<script type="text/babel"> const { useState, useEffect } = React; function App() { const images = [ "https://www.sarkarinaukriexams.com/images/import/sne4446407201.png", "https://www.sarkarinaukriexams.com/images/import/sne86811832.png", "https://www.sarkarinaukriexams.com/images/import/sne10272423583.png", "https://www.sarkarinaukriexams.com/images/import/sne1586776004.png", "https://www.sarkarinaukriexams.com/images/import/sne20464172895.png", ]; const [currentImageIndex, setCurrentImageIndex] = useState(0); useEffect(() => { const interval = setInterval(() => { setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length); }, 5000); return () => clearInterval(interval); }, []); return ( <div className='container'> <h3>React Js Change Image Every 5 Seconds</h3> <img className="image" src={images[currentImageIndex]} alt="Changing Image" /> </div> ); } ReactDOM.render(<App />, document.getElementById("app")); </script>Output of React Js Change Image Every 5 Seconds
Step 1: Import React and Set Up the Component In the first step, we import the necessary dependencies, including React, and set up a functional component called App. We also define an array called images, which contains the URLs of the images we want to display
xxxxxxxxxxconst { useState, useEffect } = React;function App() { const images = [ "https://www.sarkarinaukriexams.com/images/import/sne4446407201.png", "https://www.sarkarinaukriexams.com/images/import/sne86811832.png", "https://www.sarkarinaukriexams.com/images/import/sne10272423583.png", "https://www.sarkarinaukriexams.com/images/import/sne1586776004.png", "https://www.sarkarinaukriexams.com/images/import/sne20464172895.png", ]; const [currentImageIndex, setCurrentImageIndex] = useState(0);Here, we use the useState hook to maintain the index of the currently displayed image, and we initialize it to 0.
Step 2: Implement the Image Rotation We use the useEffect hook to handle the automatic rotation of images. Inside the useEffect, we set up a timer using setInterval to change the currentImageIndex every 5 seconds. This is done by updating the index based on the previous index, cycling through the images using the modulo operator
xxxxxxxxxx useEffect(() => { const interval = setInterval(() => { setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length); }, 5000); return () => clearInterval(interval); }, []);The clearInterval function is used in the cleanup phase to stop the interval when the component is unmounted.
Step 3: Render the Component In the return statement of the App component, we render the selected image based on the currentImageIndex. The image source is dynamically updated, and we set the alt attribute for accessibility
xxxxxxxxxx return ( <div className='container'> <h3>React Js Change Image Every 5 Seconds</h3> <img className="image" src={images[currentImageIndex]} alt="Changing Image" /> </div> );}In summary, the provided code demonstrates how to create a React component that automatically changes images every 5 seconds. This is achieved by using the useState and useEffect hooks to manage the image rotation and rendering. The result is a simple but effective image carousel that enhances the user experience on your website