DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Randy Rivera
Randy Rivera

Posted on

React: Pass State as Props to Child Components

  • A great thing about FreeCodeCamp aside from it being free it gives you like a great introduction to many different areas. In this case we're working on React. Here For example, The MyApp component is stateful and renders a Navbar component as a child. We have to pass the nameproperty in its state down to the child component, then show the name in the h1 tag that's part of the Navbar render method. name should appear after the text Hello, my name is:.

  • Ex:

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>
    );
  }
};
Enter fullscreen mode Exit fullscreen mode

Notes:

  • About React, there's an important pattern to it. The first is unidirectional data flow.
  • State flows in one direction down the tree of your application's components, from the stateful parent component to child components. The child components only receive the state data they need.
  • The second is that complex stateful apps can be broken down into just a few, or maybe a single, stateful component. The rest of your components simply receive state from the parent as props, and render a UI from that state.

Larson, Q., 2019. Frontend Development Libraries. [online] Freecodecamp.org. Available at: https://www.freecodecamp.org/learn/front-end-development-libraries/react

Top comments (0)

Search No More

Join DEV and MongoDB and build an application with full-text search capabilities using MongoDB Atlas and Atlas Search for the DEV x MongoDB Atlas Hackathon 2022.

β†’ Join the Hackathon