Access Props Using this.props. Failing 2nd and 5th tests

JavaScript
#1

Tell us what’s happening:
I tried to figure it out in the forum and comparing. Seems like I was doing the same thing with white spaces and I took them off but I am still not passing all the tests.

Tells me the following:

Test 2: The fourth child of ResetPassword should be the ReturnTempPassword component.
Test 5: The ReturnTempPassword component should display the password you create as the tempPassword prop within strong tags.

Not sure what I am missing here. I thought it was only the whitespace issue that everyone else had as well that would be the fix.

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 */ }
          <strong><ReturnTempPassword tempPassword="12ab34cd"/></strong>
          { /* change code above this line */ }
        </div>
    );
  }
};

Your browser information:

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

Link to the challenge:

#2

Why are you using <strong> tags in both ResetPassword and ReturnTempPassword? By doing so, the fourth child of ResetPassword isstrong, notReturnTempPassword`. Can you see what you might do to fix this?

#3

I don’t think the tags have anything to do with the problem but I gave your solution a try and it came out with this error message:

// running tests

The ReturnTempPassword component should display the password you create as the tempPassword prop within strong tags.

// tests completed

Not sure why you that would be the resolution to the errors since the exercise itself say to make the edits within the tags.

#4

I’ve also tried stripping out the tags and it just gave me the same 2 test fails over again.

#5

So, by removing the strong tags from the ResetPassword component, you went from two errors to one – with that change, you simply got the The ReturnTempassword component should display the password... error, and not the one about the fourth child. So that’s an improvement.

Now, it’s a question of the tempPassword property. At a guess, I’d reset the code to the original (using the Reset All Code button), simply add the ReturnTempPassword component into the ResetPassword, and add the code block they want inside the strong tags they’ve already provided for you.

#6

Okay that worked. Weird I tried that approach and it didn’t work before. The only thing I am wondering now is why in the past it was telling me to nest the solution between tags.

13%20AM
13%20AM980×152 23.5 KB

#7

They gave you the strong tags. This lesson was about getting you comfortable with using this.props, so they wanted to you to focus on getting that property into the component, then reinforce the “nesting the component” bit.

#8

Gotcha thanks for helping me figure this out. I was banging my head searching the web for answers.

#9