Borislav Hadzhiev
Wed Apr 20 2022·2 min read
Photo by Soroush Karimi
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.
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.
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.
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.
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.
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.
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.