How to Update Parent State in ReactJS ?

Updating the parent state in React involves passing a callback function as a prop to the child that triggers the state change and updates the data in the state.

Prerequisites:

• ReactJS
• React State and Props
• React Components

Approach

To update parent state in React we will pass a function as a prop to the child component. Then trigger the update funtion from the child component and the state in the parent component will be directly updated. Updating state for Class as well as Functional Components are given below.

Steps to Create React Application

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure:

Updating Parent State in Class Component

To update the parent state in class component we will pass the this.state to display data and handleUpdate funtion as props to trigger the state change. The handleUpdate funtion triggers this.setState to change the state in class component.

Example: This example updates the Parent state by button click in child component for react class components.

// Filename: App.js

import React, { Component } from "react";
class App extends Component {
	state = {
		text: "click me"
	};

	// Function to update state
	handleUpdate = (newtext) => {
		this.setState({ text: newtext });
	};

	render() {
		return (
			<div>
				<Child
					text={this.state.text}
					// Passing a function to child
					updateState={this.handleUpdate}
				></Child>
			</div>
		);
	}
}
class Child extends Component {
	render() {
		return (
			<button
				// Using parent props to update parent state
				onClick={() => this.props.updateState("parent state changed")}
			>
				{this.props.text}
			</button>
		);
	}
}

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output:

Updating Parent State in Functional Component

To update the parent state in functional component we will create useState variable. we will pass the text to display data and setText funtion as props to trigger the state change. We can directly pass the setText funtion as a prop, hendleUpdate is used to improve the readability of the code.

Example: This example update the parent state by passing the useState text variable and its setText funtion as a prop to the child component in case of funtional component.

// Filename - App.js

import React, { useState } from "react";

const App = () => {
	const [text, setText] = useState("click me");

	// Function to update state
	const handleUpdate = (newText) => {
		setText(newText);
	};

	return (
		<div>
			<Child
				text={text}
				// Passing a function to child
				updateState={handleUpdate}
			/>
		</div>
	);
};

const Child = ({ text, updateState }) => {
	return (
		<button
			// Using parent props to update parent state
			onClick={() => updateState("parent state changed")}
		>
			{text}
		</button>
	);
};

export default App;

Output: