JSX Parent and Child

JavaScript
#1

Tell us what’s happening:

How do we know MyApp is a parent component and Navbar is a child component or how do we set them as parent and child? Passed the test just trying to comprehend DOM better.

Your code so far


class MyApp extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    name: 'CamperBot'
  }
}
render() {
  return (
     <div>
       {/* Change code below this line */}
       <Navbar name={this.state.name} />
       {/* Change code above this line */}
     </div>
  );
}
};

class Navbar extends React.Component {
constructor(props) {
  super(props);
  
}

render() {
  return (
  <div>
    {/* Change code below this line */}
    <h1>Hello, my name is: {this.props.name}</h1>
    {/* 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/87.0.4280.141 Safari/537.36.

Challenge: Pass State as Props to Child Components

Link to the challenge:

#2

Parent and child are just metaphors when talking about the DOM or any other tree structure.

Like if we had:

<div>
  <span>
    <img>
  </span>
  <h1></h1>
</div>

Here, the span is a child of the div and img is a child of span. You could say that img is the grandchild of div (or more generally the descendant). You could say that the h1 is the sibling of the span.

If you draw it out on paper as a family tree, it may make more sense. It’s just a metaphor for how the nodes in the DOM relate to each other.

#3

I can understand the logic in the given example. When I give a property to the div element here, the others will inherit.

How can I understand clearly what inherits what in JSX DOM?

#4

Not all properties that are inherited. But those that are, should be inherited the same way with JSX. The only difference is that with JSX and React, you can break them up into components and work on them separately. Webpack and babel will go through and combine them into one large DOM as needed.

1 Like
#5

Now that I think about it, there may be a few differences here and there as React nests things in elements behind the scenes, especially with things like HOCs.

But I usually don’t rely on inheritance of CSS properties, preferring to state them explicitly. Among other things, it makes life a lot easier if you have to move things around or change the CSS on the ancestor.