Pass State as Props to Child Components challenge

Pass State as Props to Child Components challenge
0

#1

Tell us what’s happening:
I don’t know what is the mistake

Your code so far


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

class Navbar extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
    <div>
      <h1>Hello, my name is:{this.props.name}</h1>
    </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/pass-state-as-props-to-child-components/


#2

The instructions tell you to pass the name property in Myapp’s state down to the child component (Navbar). In your Navbar component you refer to a prop named name (this.props.name) but your MyApp render method attempts to pass a prop named MyApp to Navbar. What ever prop name you refer to after this.props needs to be the same prop name (not to be confused with the state property name) referenced in the Navbar.

For example, if I refer to this.props.somePropName in a child component (whose name is ChildComponent), then in the parent component’s render, I should reference somePropName like:

<childComponent somePropName={this.state.someStateProperty} />