Which is the parent component in this reactJS code?

Question

This is my first time posting here and I hope to learn more from you guys and others!

Below is my code for practicing ReactJS. I am learning how to program from a book by Chinnathambi. I have a question since the book doesn't specify which is the parent component.

    var Army = React.createClass ({
    render: function () {
      return (
        <div>
          <p>{this.props.insignia}</p>
          <p>{this.props.color}</p>
          <p>{this.props.country}</p>
        </div>
        );
      }
    });
/*In this example we use the spread operator to pass an array of our values to
our component. ...this.props poses the same values as insignia, color and country*/
var Unit = React.createClass ({
    render: function () {
      return (
        <div>
          <Army {...this.props}/>
        </div>
        );
      }
    });

var Uniform = React.createClass ({
    render: function () {
      return (
        <div>
          <Unit {...this.props}/>
        </div>
        );
      }
    });

/*This is an example of JSX: 
  Our component has been declared inside of the variable uniformComponent and
  it has been implemented in our DOM render method by encapsulating them in 
  curly braces.
*/
var uniformComponent = <Uniform insignia="US ARMY" color="OCP" country="USA"/>;
var placement = document.querySelector("#container3");
ReactDOM.render (
  <div>
  {uniformComponent}
  </div>,
  placement
  );

Here is a simple code where properties get passed from Uniform>Unit>Army. Which one is the parent component? I honestly think that it is the Uniform component since all the properties values get declared while we mount the component. This is a bit confusing for me because I understand that the parent component can pass properties into the children but the children cannot pass properties. In the book that I am reading the example goes from Shirt>Label>Display.

I really just need some clarification on which from these three components are the actual parent. Is it the one where the properties are declared or is it where the property values are initialized?

Answer 1

As you said,

• Uniform is the parent of Unit
• Unit is the parent of Army

Basically the parent component renders the child components, so if you see a component in the render, then it's a child.

--

Also, sometimes you will hear "grandparent" for a parent of many levels, or "root" component for the one at the very top of the tree.

Answer 2

You are right. <Uniform /> is the parent component. When this is mounted in the DOM, this is how it looks:

<Uniform>
  <Unit>
    <Army />
  <Unit />
<Uniform />

This is a bit confusing for me because I understand that the parent component can pass properties into the children but the children cannot pass properties.

Well, child component can also pass values to parent component by attaching a callback to it. Check Pass props to parent component in React.js for detailed answer.

Hope this helps!