score:0

the concept of object destructuring is an es6 feature which enables the user to use the properties of an object.in this case you are using the state object for destructring.

example without destructuring:

state={cat:'meaow',dog:'bark'}

render(){
return(
      <div>
      <h2>{this.state.cat}</h2>
      <h2>{this.state.dog}</h2>
      </div>)
}

example with destructuring:

state={cat:'meaow',dog:'bark'}

render(){
const {cat,dog}=this.state
return(
      <div>
      <h2>{cat}</h2>
      <h2>{dog}</h2>
      </div>)
}

score:1

this line of code

const {cat} = this.state

is destructor syntax. it's simply take the cat state from this.state . so you dont have to write this.state.cat every time inside render function but just simply use cat

score:1

const {cat} = this.state

it's called object destructuring assignment.

it's way flexible if you have many fields in your state or props object.

something like:

const { cat, dog, ...otheranimals } = this.state;

Related Query

More Query from same tag