ReactJs props returns undefined in componentDidMount

Question

I have a problem with my props.

in my class, if I do :

<Input type="text" name="firstName" id="firstName" placeholder="First Name" value={this.props.user.firstName}/>

that is working, my firstName appears.

but if I try :

componentDidMount = () => {
    console.log("firstName : "+this.props.user.firstName)
 }

that returns me undefined , can someone help me ?

Answer 1

First off, componentWillReceiveProps has been deprecated. So you might want to add UNSAFE_ to the method name. Note from documentation :

Note

This lifecycle was previously named componentWillReceiveProps. That name will continue to work until version 17. Use the rename-unsafe-lifecycles codemod to automatically update your components.

Second, you don't define lifecycle methods as arrow functions. You do it like this:

UNSAFE_componentWillReceiveProps(nextProps) {
    console.log("firstName : " + this.props.user.firstName)
}

Best solution? This:

componentDidUpdate(prevProps) {
  if (prevProps.user !== this.props.user) {
    console.log(`firstName: ${this.props.user.firstName}`);
  }
}