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

ootkin profile image

From Code to OpenAPI spec with Ease using SkimX

ootkin -

sainsec profile image

Cross-Site Request Forgery (CSRF)

Hussain -

ng_news profile image

Episode 24/15: Wiz behind the curtain, Copilot in VSCode

ng-news -

tagada216 profile image

Adonis JS V6 — API REST Boilerplate

Nicolas -