Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 23 Dec, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads