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.

2

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

0

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.

1

we can pass props for example in nextJS with :

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

1

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy