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