Here is a concise way to pass props that have the same name as the value being passed. Instead of:
<Component prop1={prop1} prop2={prop2}/>
The spread operator lets us use this cool syntax:
<Component {...{ prop1, prop2 }}/>
They can be combined too:
<Component {...{ prop1, prop2 }} prop3={prop3}/>
This syntax can look a little strange at first but should be quite clear once you see it a few times. Use with discretion for readability concerns.
Top comments (2)
Most of the preconfigured linters dont like this.
Good to know. Do you know if the concern is performance related or just readability?
As I alluded to at the end, I'm not dying on this hill and people should use with discretion. I do think this syntax is useful in certain situations.