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

aamfahim profile image

Refactoring code and Git history!

Abdullah Al Mamun Fahim -

mattlewandowski93 profile image

Building Interactive Emoji Animations in React ⚛️🎯

Matt Lewandowski -

ridoy_hasan profile image

How to Set Up Your JavaScript Development Environment

Ridoy Hasan -

sonaykara profile image

React : Keeping Components Pure

Sonay Kara -