How to merge two Arrays in React.js

Merge two Arrays in React.js #

Use the spread syntax (...) to merge arrays in React, e.g. const arr3 = [...arr1, ...arr2]. 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: 'Bob', 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>
  );
}

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']

If you want to merge the current state array with another array, you can 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: 'Bob', 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>
  );
}

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

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

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

This is better when merging the current state array with another 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.

You might also see the Array.concat method being 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.

How to merge two Arrays in React.js

Merge two Arrays in React.js #

Borislav Hadzhiev