Issue using this.props to access props

Tell us what’s happening:
I have added a prop to the parent component and am using it in child component but the program still says I have the following issues:

  • The ReturnTempPassword component should have a prop called tempPassword .
  • The tempPassword prop of ReturnTempPassword should be equal to a string of at least 8 characters.
    -The ReturnTempPassword component should display the password you create as the tempPassword prop within strong tags.

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="xxxxxxxx" />
          { /* change code above this line */ }
        </div>
    );
  }
};

Your browser information:

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

Link to the challenge:

Hi, I think it’s because you are trying to access this. props.tempPassword while you accidentally wrote tempPassWord with a capital W as the prop in the render method of the ResetPassword component.

2 Likes