Code in the rough

As I was going through the react tutorial on freecodecamp.org I was confused about something.  I got to the challenge about props.  You have one component inside of which you can nest another component.  The outer component is called the parent and the nested component is called the child.  I think the nest and the nested would be better terminology…

but anyway the thing that confused me about props is how you don’t declare the prop in the nested component that uses it but in the parent component.  It felt backwards.  You create two components, then you put one in the other by calling it inside of the parent with the following syntax

<NestedComponent />

then you put a prop which is basically a variable inside of the call with the following syntax

<NestedComponent prop.propName = {randomNumber or randomString} />.

Now just that won’t actually render that variable. You have to go all the way back to the declaration of the child component and change the code to use that prop. 

<p> hello  {prop.propName}! </p>. 

At least that’s the order in which it was taught.  Why wasn’t it just declared and used in the child component?  Well after doing some research apparently the idea is that the child component would be reused in different parent components and the value of the prop can be changed.  It’s good to think of components as functions and props as arguments/params.  If you declare the prop on the child component it’s like declaring default params on a function.  The tutorial is a little dated and recommends using defaultProps to set default props but the React documentation recommends setting default parameters according to the ES6 spec, which kind of reinforces this idea of props being function arguments/params.