DEV Community

terrierscript
terrierscript

Posted on

TIL: JSX ＜Foo bar={bar} baz={baz}＞ can rewrite ＜Foo {...{baz,bar} }＞

#javascript #react #jsx #typescript

In generally, we need pass all props like this.

const Baz = (props) => {
  const {a, b, c} = props
  return <>
    <div>{a}</div>
    <Foo {...props} />
    <Bar b={b} />
  </>
}
Enter fullscreen mode Exit fullscreen mode

But we can omit props with spread operator and shorthand property name.

const Baz = ({a, b, c}) => {
  return <>
    <div>{a}</div>
    <Foo {...{a, b, c}} />
    <Bar b={b} />
  </>
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

talhaahsan profile image

TypeScript Traps: Top 10 Mistakes Developers Make and How to Dodge Them

Talha Ahsan -

riteshshukla04 profile image

Building React Native In-App Modules bypassing the JS bridge.

Ritesh Shukla -

jamil3251 profile image

React native splash screen help

jamil hossain -

jacksonsantin profile image

Login/cadastro com firebase + Vue JS #PASSO 1️⃣

Jackson Dhanyel Santin -