9

What does {...this.props} mean in this code?

<div {...this.props} style={{ height: `100%`, }}
Chris Martin
  • 30,334
  • 10
  • 78
  • 137
Joey Yi Zhao
  • 37,514
  • 71
  • 268
  • 523
  • duplicate, check answer http://stackoverflow.com/questions/31048953/what-does-the-three-dots-in-react-do/41640566#41640566 – Mehdi Raash Jan 31 '17 at 22:25

3 Answers3

13

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" />
ROAL
  • 1,749
  • 1
  • 14
  • 21
2

I think it might be the spread operator (three dots) that are setting you off? :)

What does the three dots in react do?

Edit: To elaborate, you're probably looking at a JSX template? Each property will in fact be a CSS property for your style attribute in the resulting HTML. Also, the spread operator makes it so that all properties within this.props get expanded, i.e. the same thing as if each property in this.props was explicitly output in the template.

Community
  • 1
  • 1
Ted Nyberg
  • 7,001
  • 7
  • 41
  • 72
  • 1
    @Zhao Yi, Taking code form http://stackoverflow.com/a/31049016/1589444 `var component = ;` so in class definition of `Component` if you do `console.log(this.props)` in `render` function, it is like passing and array with different name, and access all keys of array directly form name variable in argument, like here `this.props` . – Ramratan Gupta Apr 13 '16 at 06:34
1

{...this.props} means all of the props of current component. Let say you have object a and object b in props than {...this.props} means both a and b. You can pass all of your current component's props to another component by using this.

Ali Raza
  • 147
  • 1
  • 10