What do these three dots (...) in React do ?

24 Jun, 2021
The three dots (...) notation referred to as the Spread syntax has been part of React for a long time when it could be used via transpilation, although, it has been made a part of JavaScript as part of the ES2015 syntax.
The Spread syntax is used to deconstruct an array or object into separate variables where the exact number of elements in the array may not be known or when we wish to keep an attribute or a set of attributes separate from the entire object.
The following can be performed using the spread syntax:
1. Passing attributes: An object can directly be passed to a component instead of passing each data value in the object separately.
values:{
    height: 20,
    width: 10
}

<Image {...values} source="Image_Source">

// This same as the following:
<Image height={values.height} 
width={values.width} source="Image_Source">
2. Inheriting an Object: When creating a new object that inherits another object we can use the Spread syntax to inherit the parent object.
object1:{
    a: 10,
    b: 20
};

object2:{
    ...object1,
    c: 14
};
3. Concatenate Arrays: We can also concatenate arrays using the Spread syntax as follows.
var first =[1, 2, 3];
var second = [2, 3, 4, 5];
var third = [...first, ...second];
4. Destructuring Arrays: Destructuring an array into separate components can also be performed using the Spread Syntax.
var original = [1,2,3,4,5,6,7];
var [first, ...remaining] = original;

// Therefore the following will be the values of first and remaining.
first = [1]  
remaining = [2,3,4,5,6,7]
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:npx create-react-app spread-syntax-demo
Step 1: Create a React application using the following command:
npx create-react-app spread-syntax-demo
Step 2: After creating your project folder, move to it using the following command:cd spread-syntax-demo
Step 2: After creating your project folder, move to it using the following command:
cd spread-syntax-demo
Project Structure: It will look like the following.
Example: Here in the App.js file, we are going to create an object create a child object from it, and then pass it as an attribute to a component.
App.js
import React from 'react';import Image from './Image.jsx';  function App(props) {  const originalImage = { src:"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png",    alt:"This is a random image"  };    const formattedImage = {    ...originalImage,    height:300,    width: 300  }  return (    <div>      <Image {...formattedImage}/>    </div>  );}  export default App;
In Image.jsx we pass props to HTML img tag using the spread syntax.
Image.jsx
import React from 'react';  function Image(props) {    return (        <div>            <img {...props}/>        </div>    );}  export default Image;
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Picked
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.