React Display Multiple Images from an Array of Object
React JS is used to display images on a web page. There are various ways to add and showcase images in React JS, such as importing them from a file, using a URL, or creating an array of images. In this article, we will learn how to create an array of images in React JS and how to display multiple images using the map method and the img tag
Thanks for your feedback!
Your contributions will help us to improve service.
How to Display Multiple Images in React Js
In React.js, to display images from an array of objects, you'd typically map through the array and render each object's image property. First, import React and define a component. Then, use the map function to iterate through the array and render each image. For instance, if the array is called imageArray and each object has an imageUrl property.
React Add Image to Array and Display to Webpage
xxxxxxxxxx <script type="text/babel"> const { useState } = React; const ImageGallery = ({ images }) => { return ( <div className="image-gallery"> {images.map((image, index) => ( <div key={index}> <p>{image.alt}</p> <img src={image.src} alt={image.alt} /> </div> ))} </div> ); }; function App() { const [images, setImages] = useState([ { src: 'https://www.sarkarinaukriexams.com/images/import/sne4446407201.png', alt: 'Image 1' }, { src: 'https://www.sarkarinaukriexams.com/images/import/sne86811832.png', alt: 'Image 2' }, { src: 'https://www.sarkarinaukriexams.com/images/import/sne10272423583.png', alt: 'Image 3' }, { src: 'https://www.sarkarinaukriexams.com/images/import/sne1586776004.png', alt: 'Image 4' }, { src: 'https://www.sarkarinaukriexams.com/images/import/sne20464172895.png', alt: 'Image 5' }, ]); const [newImageUrl, setNewImageUrl] = useState(''); const addImage = () => { if (newImageUrl) { const newImage = { src: newImageUrl, alt: `Image ${images.length + 1}` }; setImages([...images, newImage]); setNewImageUrl(''); } }; return ( <div className="container"> <h1>How to Add Image in Array in React Js And Display in Webpage</h1> <input type="text" value={newImageUrl} onChange={(e) => setNewImageUrl(e.target.value)} placeholder="Enter image URL" /> <button onClick={addImage}>Add Image</button> <ImageGallery images={images} /> </div> ); } ReactDOM.render(<App />, document.getElementById('app')); </script>