One cool trick for your React props

groos

Nick Groos

Posted on June 13, 2020

One cool trick for your React props

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.

๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ
groos
Nick Groos

Posted on June 13, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

ยฉ TheLazy.dev

About