DEV Community

loading...

TIL: JSX <Foo bar={bar} baz={baz}> can rewrite <Foo {...{baz,bar} }>

terrierscript profile image terrierscript ・1 min read

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

Discussion (0)

pic
Editor guide