Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set Parent State from Children Component in ReactJS?
In ReactJS, we can set the state in the child component by passing the values as a prop of the child component. Sometimes, we require to set the state from the children component to the parent component in ReactJS.
We can create a state handler function in the parent component and pass it as a prop of the child component. After that, we can use the child component function to set the parent component's state. In such a way, we can manage the state of the parent component from the child component.
Set parent state from children component in functional components
We can set the parent state from the children component in function components by passing the state handle function as a prop of the child component.
Whenever we pass any function as a component prop, we can execute it from the child component, even if it is defined in the parent component.
Syntax
Users can follow the syntax below to handle the parent set from the children component in React functional components.
// in the parent component
<Child change = {handleState} />
// in the child component
<button onClick = {() => change()}> Change Value from child </button>
In the above syntax, we have passed the handleState() function as a prop of the child component. In the child component, we invoke the change() function, which executes the handleState() function of the parent component.
Example
In the App.js file, we have created the state variables using the hooks. Also, we have created the handleState() variable, which changes the value of the state variable.
Also, we have imported the child component and passed the handleState() function as a prop of the child component.
Filename :- App.js
import React, { useState } from "react"; import Child from "./Child"; export default function App() { let [state, setState] = useState("Initial"); function handleState() { setState("state Changed from child component!"); } return ( <div className = "App"> <h2> {" "} Handling the <i> parent state from child component </i> in ReactJS.{" "} </h2> <div> The input value is {state}. </div> <Child change = {handleState} /> </div> ); }
Filename: Child.js
import React, { useState } from "react"; function Child({ change }) { return ( <div> <button onClick = {() => change()}> Change Value from child </button> </div> ); } export default Child;
Output
It will produce the following output-
When you click "Change Value from child" button, it will produce the following output-
In the above output, users can observe that it changes the state of the parent component when they click the button.
Example
In the first example, we were changing the parent’s state from the child component by passing the function as a prop of the child component, but we were setting up the hard-coded value for the parent’s state.
In the example below, we will also pass the value from the child component to the parent component and update the parent’s state with the new value we get from the child component.
Filename: App.js
import React, { useState } from "react"; import Child from "./Child"; export default function App() { let [state, setState] = useState("Initial"); function handleState(newValue) { setState(newValue); } return ( <div className = "App"> <h2> {" "} Handling the <i> parent state from child component </i> in ReactJS.{" "} </h2> <div> The input value in child state accessing from parent state is {state}. </div> <br></br> {/* pass handleState function as a prop of child component */} <Child change = {handleState} /> </div> ); }
Filename: Child.js
import React, { useState } from "react"; // accessing the change function from the prop. function Child({ change }) { const [value, setNewValue] = useState(""); function handleChange(event) { let value = event.target.value; setNewValue(value); change(value); } return ( <div> <input placeholder = "Enter some texts." value = {value} onChange = {handleChange} /> </div> ); } export default Child;
Output
When you enter some text –
In the above output, users can observe that the input element is inside the child component. Whatever we write in the input field reflects in the parent component.
Set parent state from children component in class components
We can also pass the method as a prop of the child component in the class component to handle the parent's state from the child component.
Syntax
Users can follow the syntax below to handle the parent’s state from the child component in class components.
<Child changeState = {this.changeState} />
<button onClick = {this.changeState}> Change parent's state </button>
In the above syntax, we use the this keyword to access the function and pass it as a prop of the child component. Users can see how we invoke the changeState() function from the child component.
Example
In the App.js file, we have defined the state in the constructor. Also, we have defined the changeState() method, which sets the state value. The changeState() method takes the updated value as a parameter, which we use to update the value of the state.
Filename: App.js
import React, { useState } from "react"; import Child from "./Child"; class App extends React.Component { constructor(props) { super(props); this.changeState.bind(this); this.state = { value: "Empty" }; } changeState = (newValue) => { this.setState({ value: newValue }); }; render() { return ( <div> <h2> {" "} Handling the <i> parent state from child component </i> in class components </h2> <h3> The value of state variable is {this.state.value}.</h3> <Child changeState = {this.changeState} /> </div> ); } } export default App;
In the Child.js file, we execute the handleChange() function on the button click. The handleChange() method invokes the changeState() method of the prop by passing the new value as a parameter.
Filename : Child.js
import React from "react"; import { Component } from "react"; // accessing the change function from the prop. class Child extends Component { constructor(props) { super(props); this.handleChange.bind(this); } handleChange = () => { this.props.changeState("This is value set up from child component!"); }; render() { return ( <div> <h3> This is a child component! </h3> <button onClick = {this.handleChange}> Change parent's state </button> </div> ); } } export default Child;
Output
When you click "Change parent's state" button, it will produce the following output-
In this tutorial, we learned to set the state of the parent component from the child component. The general way to achieve the goal is to pass the state handle function as a prop of the child component and execute the handler function from the child component by passing the new state value as a parameter.
33K+ Views
