Destructuring React props

JavaScript
1

i am watching a tutorial and teacher refactor below code

function profile (props){
  let info = props.info
  //...............
}

then he refactor it like

function profile ({info}){
  //let info = props.info    (delete this line)
  //...............
}

I know basic of destructuring and according to my understanding it should be done like this

function profile (props){
  let{ info} = props
  //...............
}

but he is passing {info } directly as parameter ,i still unable to understand above code so can any one explain me it.

2

Props is an object.

<Profile info="some info" />

props is

{ info: "some info" }

So in the function that returns that component,

function Profile (props) {
  return <p>{props.info}</p>
}

function Profile (props) {
  let { info} = props;
  return <p>{info}</p>
}

function Profile ({info}) {
  return <p>{info}</p>
}

Are all literally the same. The last one has the advantage of both brevity and of being extremely clear as to what the component’s props are when you’re reading the code

1 Like