Menu
What does {...this.props} mean in this code?
<div {...this.props} style={{ height: `100%`, }}
828
“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another. But the important part here is that data with props are being passed in a uni-directional flow. (
Don't “copy props into state.” It creates a second source of truth for your data, which usually leads to bugs. One source of truth is best. Components will already re-render when their props change, so there's no need to duplicate the props as state and then try to keep it up to date.
When using 'this' in an object, this will refer to the object itself. This makes it easy to refer to an object's values in the object's methods.
It allows passing data from one component to other components. It is similar to function arguments and can be passed to the component the same way as arguments passed in a function. Props are immutable so we cannot modify the props from inside the component.
The {...variable} syntax is called "spread attributes".
What this does is, basically, it takes every property of this.props (or any other passed variable) and applies them to the element.
Example:
props = {className: 'big', href: 'http://example.com'};
<a {...props} />
// the above line is equal to the following
<a className="big" href="http://example.com" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
