Usage of 'this'

JavaScript
1

Tell us what’s happening:
Maybe it is asked for a million times, but here is the problem: What is the difference between props.tempPassword and this.props.tempPassword ? Though ‘this’ keyword refers to the global object, what is the need of it in this code, why it does not worked properly without ‘this’, was not that worked for the previous tutorials? Appreciate your explanation, thanks for your patience.

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_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Safari/605.1.15.

Challenge: Access Props Using this.props

Link to the challenge:

2

this refers to the calling context.

Objects need a way to refer to themselves.

A class creates an object.

Within the functions attached to that object, there’s got to be a way to access the data/functions attached to it

const TempPassword = {
  props: {
    tempPassword: "Password1",
  },
  render() {
    // can't work:
    // return props.tempPassword;
    // works:
    return this.props.tempPassword;
  },
}
2 Likes