JIYIK CN >

Use spread syntax ...to merge arrays in React, for example const arr3 = [...arr1, ...arr2]. 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 while setting the state.

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 use the spread syntax to merge two arrays.

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 method we useStategot from the hook setState().

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 setEmployeespass a function to the method: setEmployees(prevState => [...prevState, ...arr]);.

This works better when merging the current state array with another one, because setEmployeesthe function we pass to is guaranteed to be called with the current (latest) state.

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

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

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

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

This process can be repeated for as many arrays as needed.

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);

We can use the same approach when setting state in React. When we used the spread syntax ..., we created a shallow copy of the original array.

We may also see Array.concatthe method used to merge arrays in React.

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);

concatThe method also merges two or more arrays. The method takes one or more arrays as arguments and merges them into the array on which it is called.

However, the extended syntax ...is more widely used in React.js applications.