React Js Add Image to Array

React Js Add Image to Array:Adding an image to an array in a React.js application is a common task when working on projects that involve managing and displaying a collection of images. This tutorial will explain, which allows you to add an image URL to an array in a React.js app.

written

reviewed

updated

React Js Add Image to Array

  <script type="text/babel">
    const { useState} = React;

    function App() {
      const [imageArray, setImageArray] = useState([
        "https://www.sarkarinaukriexams.com/images/import/sne4446407201.png",
        "https://www.sarkarinaukriexams.com/images/import/sne86811832.png",
      ]);
      const [imageUrlInput, setImageUrlInput] = useState('');

      const addImage = () => {
        if (imageUrlInput.trim() !== '') {
          setImageArray([...imageArray, imageUrlInput]);
          setImageUrlInput('');
        }
      };

      return (
        <div className='container'>
          <h3>React Js Add Image in array</h3>
          <div className="image-container">
            {imageArray.map((imageUrl, index) => (
              <img key={index} src={imageUrl} alt={`Image ${index}`} />
            ))}
          </div>
          <div>
            <input
              type="text"
              placeholder="Enter Image URL"
              value={imageUrlInput}
              onChange={(e) => setImageUrlInput(e.target.value)}
            />
            <button onClick={addImage} className="button">Add Image</button>
          </div>
        </div>
      );

    }

    ReactDOM.render(<App />, document.getElementById("app"));
  </script>

Run

Output of React Js Add image to Array

In the example code provided, we have created a React.js component that demonstrates how to add images to an array. Let's break down the code step by step:

Setting up the Component

const { useState } = React;

function App() {
  const [imageArray, setImageArray] = useState([
    "https://www.sarkarinaukriexams.com/images/import/sne4446407201.png",
    "https://www.sarkarinaukriexams.com/images/import/sne86811832.png",
  ]);
  const [imageUrlInput, setImageUrlInput] = useState('');

In this section, we import the necessary modules, set up the component, and initialize the state variables. imageArray is used to store the list of image URLs, and imageUrlInput is used for capturing user input.

Adding Images to the Array

const addImage = () => {
  if (imageUrlInput.trim() !== '') {
    setImageArray([...imageArray, imageUrlInput]);
    setImageUrlInput('');
  }
};

The addImage function is called when the "Add Image" button is clicked. It checks if the imageUrlInput is not empty and trims any leading or trailing spaces. If the input is valid, it creates a new array with the current image URLs and the new URL provided by the user. It then resets the imageUrlInput to an empty string.

Rendering the Component

return (
  <div className='container'>
    <h3>React Js Add Image to Array</h3>
    <div className="image-container">
      {imageArray.map((imageUrl, index) => (
        <img key={index} src={imageUrl} alt={`Image ${index}`} />
      ))}
    </div>
    <div>
      <input
        type="text"
        placeholder="Enter Image URL"
        value={imageUrlInput}
        onChange={(e) => setImageUrlInput(e.target.value)}
      />
      <button onClick={addImage} className="button">Add Image</button>
    </div>
  </div>
);

This part of the code defines the component's user interface. It displays the existing images stored in the imageArray using the map function and dynamically renders each image using an <img> tag. The input field allows users to enter image URLs, and the "Add Image" button triggers the addImage function when clicked.

In conclusion, this React.js example demonstrates how to add image URLs to an array, making it a practical way to manage and display a collection of images within your React application. Users can add images dynamically, and the component updates the display in real-time.

React JS Tutorial

React Js Add Image to Array

Feedback for Abhishek

React Js Add Image to Array

Setting up the Component

Adding Images to the Array

Rendering the Component