React: Passing State from Parent to Child Component

In this article, we will see how State can be passed from Parent component to Child Component as props.

In the below example, App is a stateful component that has property name initialized in the constructor. It calls Child Component “Hello” and passes the state variable “name” as props.
 

Parent Component

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

 

Child Component

The name property is accessed in the Child Component as this.props.name

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

Output:

Hello John
 

© 2018, https:. All rights reserved. On republishing this post, you must provide link to original post

Leave a Reply.. code can be added in <code> </code> tags