How To Use Array In ReactJS

Loop through an array of objects using React.

In this tutorial, we are going to see how to handle the Array using ReactJS. We can use the JavaScript standard Array functions in the ReactJS. However, we have to do some extra work to manipulate the Array in ReactJS, why because the ReactJS uses the useState Hook to update the variable values.

In this tutorial, we are going to see the following topics.

1. Iterate String and Array of Objects.
2. Add a new row to Array.
3. Update a row in Array.
4. Delete a row in Array.

Let’s see them one by one.

Iterate String Array:

First, we will see how to loop through the Array and display it in the UI.

Create a new String Array using the below code in your App.js file using useState Hook.

const [fruits_list,setFruits]=useState(["Apple","Orange","Banana"])

The Array contains the list of fruits. We can iterate and display the Array in the UI using map() function.