Access Props Using this.props: not defined

I keep getting an error that says "PropTypes is not defined:

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.propTypes = {
              tempPassword = PropTypes.string}

            <ReturnTempPassword tempPassword />

           
          { /* change code above this line */ }
        </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

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

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 (


Reset Password


We’ve generated a new temporary password for you.


Please reset this password from your account settings ASAP.


{ /* change code below this line / }
<ReturnTempPassword tempPassword= {“12345678”}/>
{ /
change code above this line */ }

);
}
};
1 Like

Can you please tell me why my code wasn’t working?

you have to pass the props to the first component in order to have access to it

from ResetPassword you pass the props to ReturnTempPassword

<ReturnTempPassword tempPassword= {“12345678”}/>

Actually the error throws from here. You are assigning PropTypes.string to tempPassword, but PropTypes is not defined in your code.

PropTypes is 3rd party module that types your react components during development. I doubt that’s what you really mean to use. Are you sure it’s not ReturnTempPassword.defaultProps = { tempPassword: '' }?

I followed a few tutorials and got used to using propTypes and while it was a pain, it did keep things organized and help with debugging since I had a list of what I’d sent in, or thought i did.

However I’m doing Colt Steele’s bootcamps from Udemy and he doesn’t use them, so I got lazy. Do you think it’s important to do so?

Yes. Not necessarily for tutorials, but definitely in production. If you don’t use typescript (my favorite) or flow, at least use the PropTypes package.

When your app starts to grow in size, having types will save you from many silly, deadline approaching mistakes. We’re all prone to being forgetful, and javascript will actually run with wrong code using bad syntax or accesses. It tries to be helpful by patching your mistakes, but ends up causing you weird runtime crashes.

There’s no shame using all the tools at your disposal. It’ll let you focus on delivering a better product.

1 Like

Sounds like solid advice. I wish I’d kept up with it in this project but I got tired of typing!