Assigning props to variable in React class component

user_9281222 0
Viewed 11502

I have a simple react component. I would like to assign a variable inside the component method to props. I've tried this method works with functional components:

class Pets extends React.component {
  constructor(props) {
    super(props)
  }

 const {dog, cat, frog} = props
 // the code on the line above does not work

 render() {
   return (
     <div>
       {dog.name}
       {cat.name}
     </div>
   )
 }
}
reactjs
1 Answers

That will not work. props is a property on the instance of the component you created with <Pets /> JSX for example. It needs to be inside the instance methods of the class Pets. It will work if you do it in the render method by const {dog, cat, frog} = this.props. props in the class body as you have now in the question is not what them expected to be.

Inside the constructor function just const {dog, cat, frog} = props will work, because here props object is received as an argument. so this.props (after the super(props) line)andprops` is same object.

Generally you unpack props where you need them, for example you need those inside the render to create some output, so you unpacked it there. I tried to explain in this answer what props means in the class body, and instance methods body, how you can access the props in different methods etc. But as xadm said, unpacking them inside the constructor by thinking you will access them later in other methods will not work due to the scope boundary, unless you store them as a property to the instance again using this.dog = props.dog. But this is an horrible idea, never do this. Just unpack them when you need any property from props object in that place only.

user_27677550
Related