How to merge two Arrays in React.js

# Merge two Arrays in React.js

Use the spread syntax (...) to merge arrays in React.

The spread syntax is used to unpack the values of two or more arrays into a new array.

The same approach can be used to merge two or more arrays when setting the state.

App.js

Copied!
import {useState} from 'react';

export default function App() {
  const initialState = [
    {id: 1, name: 'Alice', salary: 100},
    {id: 2, name: 'Bobby Hadz', salary: 200},
  ];

  const [employees, setEmployees] = useState(initialState);

  const handleClick = () => {
    const arr = [
      {id: 3, name: 'Carl', salary: 300},
      {id: 4, name: 'Demi', salary: 400},
    ];

    // 👇️ merge arrays 👇️
    setEmployees([...employees, ...arr]);
  };

  return (
    <div>
      <button onClick={handleClick}>Merge arrays</button>

      {employees.map(employee => {
        return (
          <div key={employee.id}>
            <h2>Name: {employee.name}</h2>
            <h2>Name: {employee.salary}</h2>
            <hr />
          </div>
        );
      })}
    </div>
  );
}

react merge two arrays

We used the spread syntax to merge two arrays.

App.js

Copied!
const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];

const arr3 = [...arr1, ...arr2];
console.log(arr3); // 👉️ ['a', 'b', 'c', 'd']

The spread syntax unpacks the elements of the two arrays into a new, third array.

If you get the warning prop spreading is forbidden, click on the link and follow the instructions.

# Merge arrays based on the current state array

If you want to merge the current state array with another array, pass a function to the setState() method we get from the useState hook.

App.js

Copied!
import {useState} from 'react';

export default function App() {
  const initialState = [
    {id: 1, name: 'Alice', salary: 100},
    {id: 2, name: 'Bobby Hadz', salary: 200},
  ];

  const [employees, setEmployees] = useState(initialState);

  const handleClick = () => {
    const arr = [
      {id: 3, name: 'Carl', salary: 300},
      {id: 4, name: 'Demi', salary: 400},
    ];

    // 👇️ merge arrays (based on previous state array)
    setEmployees(prevState => [...prevState, ...arr]);
  };

  return (
    <div>
      <button onClick={handleClick}>Merge arrays</button>

      {employees.map(employee => {
        return (
          <div key={employee.id}>
            <h2>Name: {employee.name}</h2>
            <h2>Name: {employee.salary}</h2>
            <hr />
          </div>
        );
      })}
    </div>
  );
}

react merge two arrays

We passed a function to the setEmployees method: setEmployees(prevState => [...prevState, ...arr]);.

This is better when merging the current state array with another array because the function we passed to setEmployees is guaranteed to be called with the current (most up-to-date) state.

When using the spread syntax, the order in which you unpack the arrays is important.

index.ts

Copied!
const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];

const arr3 = [...arr2, ...arr1];

// 👇️ ['c', 'd', 'a', 'b']
console.log(arr3);

This process can be repeated with as many arrays as necessary.

index.ts

Copied!
const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];
const arr3 = ['e', 'f'];

const arr4 = [...arr1, ...arr2, ...arr3];

// 👇️ ['a', 'b', 'c,' 'd', 'e', 'f']
console.log(arr4);

You can use the same approach when setting the state in React. When we use the spread syntax (...), we create a shallow copy of the original array.

# Merge two Arrays in React.js using `Array.concat()`

You can also use the Array.concat() method to merge two arrays in React.

App.js

Copied!
import {useState} from 'react';

export default function App() {
  const initialState = [
    {id: 1, name: 'Alice', salary: 100},
    {id: 2, name: 'Bobby Hadz', salary: 200},
  ];

  const [employees, setEmployees] = useState(initialState);

  const handleClick = () => {
    const arr = [
      {id: 3, name: 'Carl', salary: 300},
      {id: 4, name: 'Demi', salary: 400},
    ];

    // 👇️ merge arrays using Array.concat() 👇️
    setEmployees(employees.concat(arr));
  };

  return (
    <div>
      <button onClick={handleClick}>Merge arrays</button>

      {employees.map(employee => {
        return (
          <div key={employee.id}>
            <h2>Name: {employee.name}</h2>
            <h2>Name: {employee.salary}</h2>
            <hr />
          </div>
        );
      })}
    </div>
  );
}

react merge two arrays

The Array.concat method is also used to merge arrays in React.

index.ts

Copied!
const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];
const arr3 = ['e', 'f'];

const arr4 = arr1.concat(arr2, arr3);

// 👇️ ['a', 'b', 'c,' 'd', 'e', 'f']
console.log(arr4);

The concat method also merges two or more arrays. The method takes one or more arrays as parameters and merges them into the array on which it was called.

However, the spread syntax (...) is much more widely used in React.js applications.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to merge two Arrays in React.js

# Merge two Arrays in React.js

# Merge arrays based on the current state array

# Merge two Arrays in React.js using Array.concat()

# Additional Resources

Borislav Hadzhiev

# Merge two Arrays in React.js using `Array.concat()`