In this blog post, you will learn what is the Spread operator in React JS, And how it plays a significant role while working with React js.
Objective
The main tasks are Copying, merging, passing props, function arguments, and destructuring. Let’s understand one by one.
Copying
It easily creates a copy of your array without modifying the original one. This concept is useful when manipulating data without affecting the original source. It works the same for objects as well.
During the copying, it effectively creates key-value pairs in the new array or object, with array elements becoming the values and their indices (in the case of arrays) or object properties becoming the keys.
const oldArray = [1, 2, 3];
const newArray = [...oldArray ];
console.log(newArray); // Output: [1, 2, 3]Merging
It helps you to combine objects and array data into a single entity, that lead you to merge data from different source or make you able to create new data structure.
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2];
console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]Function Arguments
The Spread operator is helpful when passing an array of arguments to a function.
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // Output: 6
Destructuring
The Spread operator helps you to extract specific elements from arrays or properties from objects.
const numbers = [1, 2, 3, 4, 5, 6];
const [first, second, ...rest] = numbers;
console.log(first); // Output: 1
console.log(second); // Output: 2
console.log(rest); // Output: [3,4,5,6]Passing Props
React uses a prop to pass the data to the component. The Spread Operator in React JS helps perform that operation very well. Check out the demo code.
import React from 'react';
function ChildComponent(props) {
return <p>Hello, {props.name}!</p>;
}
function ParentComponent() {
const person = { name: 'Alice' };
return <ChildComponent {...person} />;
}
export default ParentComponent;
import React, { useState } from 'react';
function ParentComponent() {
const [formData, setFormData] = useState({
firstName: '',
lastName: ''
});
// Handler function to update the state when text inputs change
const handleInputChange = (event) => {
setFormData({ ...formData, [event.target.name]: event.target.value });
};
return (
<div>
<input
type="text"
name="firstName"
placeholder="Enter first name"
onChange={handleInputChange}
/>
<input
type="text"
name="lastName"
placeholder="Enter last name"
onChange={handleInputChange}
/>
{/* Child component to display the entered values */}
<ChildComponent {...formData} />
</div>
);
}
function ChildComponent(props) {
return (
<div>
<p>First Name: {props.firstName}</p>
<p>Last Name: {props.lastName}</p>
</div>
);
}
export default ParentComponent;
Lines 9 to 14 initialize a state variable student using the useState hook. A student is an object with two properties, first name and last name, initially set to an empty string.
You can also pass the value to the child component using a prop.
Read Other Post