Swaraj ghosh Swaraj ghosh - 3 months ago 14
React JSX Question

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>

Answer

It's called spread attributes and it's aims for making 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={} />

so 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 only when you pass the props down to another component. Use your unpacked props as normal this.props.x.