What is the meaning of spread operator (…) in Reactjs?

The three dots syntax (…) is part of ES6 and not React itself and it’s used by two operators i.e. the Spread and Rest operators. The Spread operator lets you expand an iterable like an object, string, or array into its elements while the Rest operator does the inverse by reducing a set of elements into one array.

The spread operator is very useful when you want to make an exact copy of an existing array, you can use the spread operator to accomplish this quickly.

Creating React Application:

• Step 1: Create a React application using the following command:

  
  
  

  npx create-react-app foldername

• Step 2: After creating your project folder i.e. foldername, move to it using the following command:

  cd foldername

Example:

• App.js:

  Javascript

  import React, { Component } from 'react';
  
  // Details is a component in same folder
  import Details from './Details';
  class App extends React.Component {
  
    render() {
      var person = {
        name: 'User',
        age: 22
      };
  
      return (
        <div>
          {/* Details component which accepts props */}
          <Details {...person} title='Dear' />
        </div>
      );
    }
  }
  
  export default App;

• Details.js (Details Component):

  Javascript

  import React, { Component } from 'react';
  
  class Details extends React.Component {
    render() {
      // To extract values in variables sent by parent component
      const { name, age } = { ...this.props };
      return (
        <div>
          <h3>Person Details: </h3>
          <ul>
            <li>name={this.props.title} {name}</li>
            <li>age={age}</li>
          </ul>
        </div>
      );
    }
  }
  
  export default Details;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start