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