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

What is the meaning of

{...this.props} 

I am trying to use it like that

 <div {...this.props}> Content Here </div> 

6 Answers

It's called spread attributes and its aim is to make the passing of props easier.

Let us imagine that you have a component that accepts N number of properties. Passing these down can be tedious and unwieldy if the number grows.

<Component x={} y={} z={} /> 

Thus instead you do this, wrap them up in an object and use the spread notation

var props = { x: 1, y: 1, z:1 }; <Component {...props} /> 

which will unpack it into the props on your component, i.e., you "never" use {... props} inside your render() function, only when you pass the props down to another component. Use your unpacked props as normal this.props.x.

It's ES6 Spread_operator and Destructuring_assignment.

<div {...this.props}> Content Here </div> 

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 ( <div> <h3> Person Information: </h3> <ul> <li>name={name}</li> <li>age={age}</li> <li>country={country}</li> </ul> </div> ); } } ReactDOM.render( <TestDemo {...person}/> , mountNode ); 

or Function component

const props = { name: "xgqfrms", age: 23, country: "China" }; const Test = (props) => { return( <div name={props.name} age={props.age} country={props.country}> Content Here <ul> <li>name={props.name}</li> <li>age={props.age}</li> <li>country={props.country}</li> </ul> </div> ); }; ReactDOM.render( <div> <Test {...props}/> <hr/> <Test name={props.name} age={props.age} country={props.country} /> </div> , mountNode ); 

refs

It will compile to this:

React.createElement('div', this.props, 'Content Here'); 

As you can see above, it passes all it's props to the div.

It is ES-6 feature. It means you extract all the properties of props in div.{... }

operator is used to extract properties of an object.

You will use props in your child component

for example

if your now component props is

{ booking: 4, isDisable: false } 

you can use this props in your child compoenet

 <div {...this.props}> ... </div> 

in you child component, you will receive all your parent props.

we can pass props for example in nextJS with :

 <Component {...{ props, allCount: count?.lenght, }} />