Code Solution explanantion - React - Pass State as Props to Child Components

JavaScript
1

I solved it but how does props pull the name value from the Navbar element?

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/122.0.0.0 Safari/537.36

Challenge Information:

React - Pass State as Props to Child Components

2

It’s the other way around, MyApp passes name prop to the Navbar component. Navbar component just uses the prop.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.