How To Use Array In ReactJS

Loop through an array of objects using React.

Bharathiraja
May 18 · 3 min read

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:

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.

  1. The iteration starts with a single curly brace, like variable binding.
  2. Call the map() function on Array variable fruits_list with a callback function. It points to the individual string element(fruit) and index position of the string element. The index is much needed.
  3. Display the string element using the single curly brace({}).
  4. Use the key property in the root of iteration. The ReactJS needs the key property. And we need to give a unique value to this key property. If the key value is not unique, then you may get an error. That’s why I am giving the index value to the key property.

Save the code and preview it. You can see the list of fruits as output.

Iterate Array Of Objects:

So let’s create an Array with employee name and experience.

const [emps,setEmps]=useState([{name:"Raja",experience:"10+ Years"},{name:"Mano",experience:"2 Years"},{name:"Tom",experience:"5+ Years"},])

Then iterate the employee list using the same map() function.

Each row in the array is an object. To access the name and experience use the dot operator from the object(row).

Add Row:

To add a new row to the existing array.

  1. First, create a new object with a name and experience.
  2. Then use the setter function from the useState to add the new object to the array. The syntax is given below.
setArrayName( [...arrayName, newObjectName] )

Update Row:

To update a row in the existing array.

  1. Get the row using the index position and assign it to a new variable.
  2. Modify the object property using the new variable.
  3. Then assign the updated object to the array using the index position.
  4. use the setter function to update the array.

Delete Row:

  1. filter() function
  2. splice() function

Filter function example code is given below.

const deleteRow = () => {let name="Mano"setEmps(emps.filter(emp => emp.name !== name))}

Splice() function example code is given below.

const deleteRow = () => {let copy_emp=[...emps]copy_emp.splice(0,1)setEmps(copy_emp)}

To use the splice, you must take a copy of the array, then apply the splice function.

Get Full Source Code:

Output:

Output for Array Example

Summary:

ReactJS Tutorial Series List.

  1. Create Your First React Project
  2. Click Event in React
  3. Data and Input Field Binding In React

CodeX

Everything connected with Tech & Code

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store