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).