What is the meaning of {…this.props} in Reactjs

Question

What is the meaning of

{...this.props}

I am trying to use it like that

 
 Content Here          


        
      

Answer 1

It's ES6 Spread_operator and Destructuring_assignment.

  Content Here

It's equal to Class Component

const person = {
    name: "xgqfrms",
    age: 23,
    country: "China"
};

class TestDemo extends React.Component {
    render() {
        const {name, age, country} = {...this.props};
        // const {name, age, country} = this.props;
        return (
          

              
 Person Information: 
              

                
name={name}
                
age={age}
                
country={country}
              
          
        );
    }
}

ReactDOM.render(
    
    , mountNode
);

---

or Function component

const props = {
    name: "xgqfrms",
    age: 23,
    country: "China"
};

const Test = (props) => {
  return(
    

        Content Here
        

          
name={props.name}
          
age={props.age}
          
country={props.country}
        
    
  );
};

ReactDOM.render(
    

        
        

        
    
    , mountNode
);

refs

• https://babeljs.io/docs/plugins/transform-object-rest-spread/

• https://facebook.github.io/react/docs/components-and-props.html