• displays a single image, but based on the previous and next buttons, displays an image accordingly.

Steps :

• Create an array with a list of image URLs.
• Create a state variable and initialise it with an initial value of 0.
• Create a function to update the state variable, based on which you can display the images through the state value.

Note: Instead of two functions, you can create one function and pass the operation prop, like prevState and nextState, to update the state variable accordingly.

Bug: If you keep pressing the next or previous buttons, it will be incremented or decremented by 1. Suppose you have 5 images. If you decrement or Increment multiple times, the state value is less than zero or the state value is greater than 5. less than zero and greater than 5, doesn't have any images. If you access this invalid index within the image src, then it will throw an error, but it is not a JavaScript error; it is a network error because random index.

Increase logic : setActive(active => (active +1) % imageArray.length)

• If it is greater than the image count, then the state value is initialised with the image's first value, which is zero.

Decrement logic : setActive(active => (active - 1 < 0 ? ImagesArray.length : active -1 ))

• If it is less than zero, then the state value is initialised with a max image value of 4.

Enhancements: 1 - Automatically scroll the images :

useEffect(()=>{
	setInterval(()=>{
		LoadNextImage();
	},300)
},[])

Bug: SetInterval is executed every 3 seconds, even if the component is unmounted. If you attach an event listener or set an interval. It will affect the performance. You need to clean up the SetInterval or event listeners.

useEffect(()=>{
	let id = setInterval(()=>{
		LoadNextImage();
	},300)
	
	return ()=> clearInterval(id)
},[])

2 - Display half the image of the previous image on the left side and display half the image of the next image on the right side.