Help understanding props with React/ES6

Tell us what’s happening:

I’ve passed this activity, but I need some help understanding. Why do we put the prop for the child into the parent just to access it in the child to then finally render the child in the parent?

An explanation or an article or something to make sense of this would be awesome! :slight_smile:

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="adgdmhfe"/>
        { /* 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/86.0.4240.75 Safari/537.36.

Challenge: Access Props Using this.props

Link to the challenge:

1 Like

Props are simple properties just like we add names to input boxes in forms.

This involves inheritance so written explanation isn’t worth so this is a reference to the link from where I learnt about this topic.

1 Like

Why do we put the prop for the child into the parent just to access it in the child to then finally render the child in the parent?

In this example, it looks like we want to make ReturnTempPassword a component that is only responsible for displaying the password. And the parent is responsible for deciding what it is. This is a typical ‘separation of concerns’.

You could let the child do all the work, and figure out the password. To do so is fine. Although you wouldn’t be learning about props then. This code has two jobs - to work and to teach!

In a more complex application, you probably would want to have the code that gets the password from a server in one place, and the code that displays it separated, and pass the password via props. This is just to stop having really big components that do too much.

However not necessarily always - it depends on a lot of things, not least of which: the programmer’s taste.

It also makes the ReturnTempPassword component reusable. The example given in the challenge is obviously contrived, but the child component might be used in multiple other components. All it is responsible for is displaying the data pass to it.

It might also help if you think of the components as function calls and props as arguments/parameters. I’m sure you can think of a reason why one function might get called inside other functions and pass data (like a utility function for example).