Access Props Using this.props - Help understanding what this is doing

Access Props Using this.props - Help understanding what this is doing
0

#1

Tell us what’s happening:

Your code so far


class ReturnTempPassword extends React.Component {
  constructor(props) {
    super(props);

  }
  render() {
    return (
        <div>
            { /* change code below this line */ }
            <p>Your temporary password is: <strong>
              {this.props.tempPassword}
            </strong></p>
            { /* change code above this line */ }
        </div>
    );
  }
};

class ResetPassword extends React.Component {
  constructor(props) {
    super(props);

  }
  render() {
    return (
        <div>
          <h2>Reset Password</h2>
          <h3>We've generated a new temporary password for you.</h3>
          <h3>Please reset this password from your account settings ASAP.</h3>
          { /* change code below this line */ }
            <ReturnTempPassword tempPassword='12345678'/>
          { /* change code above this line */ }
        </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/access-props-using-this-props


#2

I think I understand: So the first section is creating the ReturnTempPassword class, and the ‘this’ is still ambiguous as to what it refers to at this point.

The second section calls the ReturnTempPassword class, and in doing so, creates the tempPassword for ReturnTempPassword to use. The ‘this’ them refers to ReturnTempPassword itself.

I think I got it. Probably need to study the nomenclature a little more as well, haha


#3

Just to be clear, the class ReturnTempPassword’s render is not executed until it is referenced in the following line of the ResetPassword component. The this inside the render method is not ambiguous, because it actually does refer to the ReturnTempPasword class itself.

<ReturnTempPassword tempPassword='12345678'/>

#4

Ooohhhhh!!! I got it! Thanks!