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

arjun98k profile image

Conditional Statements and Loops in JavaScript

arjun -

sharathchandark profile image

Build A Stunning Animated Travel Image Slider Using Html, Css, And JavaScript!

sharathchandark -

hamzakhan profile image

🚀 The Rise of Bun.js: Why It’s More Than Just Another JavaScript Runtime 🥖

Hamza Khan -

araldhafeeri profile image

Designing and Implementing Ant Design Global App Tour for React Apps.

Ahmed Rakan -