Skip to content
Related Articles

Related Articles

Improve Article
What is the meaning of spread operator (…) in Reactjs?
  • Last Updated : 23 Dec, 2020

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :