Skip to content

Courses
Tutorials
Practice
Contests

React Tutorial
React Exercise
React Basic Concepts
React Components
React Props
React Hooks
React Router
React Advanced
React Examples
React Interview Questions
React Projects
Next.js Tutorial
React Bootstrap
React Material UI
React Ant Design
React Desktop
React Rebass
React Blueprint
JavaScript
Web Technology

How to Call Parent Components's Function from Child Component in React ?

How to set Parent State from Children Component in ReactJS?

Last Updated : 07 Oct, 2024

Comments

Improve

Suggest changes

Like Article

Like

Report

To set the parent state from a child component, we use React’s unidirectional data flow. Instead of directly passing data, we pass a function that enables the child to send data back to set the parent state.

Prerequisites:

React JS
useState Hook

Approach

To set parent state from child component in React, we will define a callback function in the parent component to update its state. Pass the callback function to the child as a prop. The child calls the callback function via props, sending data to the parent and sets the parent state.

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:

project-structure---change-parent-state-from-child

Example: This example demonstrates setting parent state from child component by passing a callback function as a prop to the child component.

JavaScript

// Filename - App.js  import React, { useState } from "react"; import Child from "./child";  const App = () => { 	const [title, setTitle] = useState("");  	return ( 		<React.Fragment> 			<h1>{title}</h1> 			<Child setParentState={setTitle} /> 		</React.Fragment> 	); };  export default App;

JavaScript

// Filename - child.js  import React from "react";  const Child = ({ setParentState }) => { 	const handleClick = () => { 		setParentState("Geeks For Geeks"); 	};  	return <button onClick={handleClick}>Reveal Title</button>; };  export default Child;

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

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

How to Call Parent Components's Function from Child Component in React ?

P

pratikraut0000

Improve

Article Tags :

JavaScript
ReactJS
Technical Scripter
Web Technologies
Technical Scripter 2020

Similar Reads

How To Pass Props From Parent to Child Component in ReactJS?

ReactJS is a powerful library that helps developers build interactive user interfaces by breaking them into reusable components. One of the essential features of React is the ability to pass data between components using props. In React, props allow parent components to send data or functions to chi

How to Pass Data From Child Component To Its Parent In ReactJS ?

In ReactJS, the flow of data is typically one-way, meaning data is passed from parent to child components using props. However, there are situations where you may need to pass data from a child component back up to its parent component. In this article, we will cover how to pass data from a child co

How to Call Parent Components's Function from Child Component in React ?

In React, it is very important to manage communication between components for building flexible and maintainable applications. Sometime, you need to trigger a function defined in a parent component from a child component. In this article, we'll see how to achieve this in React by passing down functi

How to access props.children in a stateless functional component in ReactJS ?

The {props. children} allows you to create a generic template, which can be modified by a parent when invoked. In this way, a parent component can easily pass whatever is necessary to its child, even generated layout features. Anytime you call a component, it automatically displays whatever it has b

How to locally manage component's state in ReactJS ?

Any component in React JS majorly depends on its props and state to manage data. A component's state is private to it and is responsible for governing its behavior throughout its life. A state is nothing but a structure that records any data changes in a react application. It can be used for storing

How To Get Previous State In ReactJS Functional Component?

To get the previous state in ReactJS Functional Component we can use the previous value of the state while using the set state method. State can only be directly accessed in the class component so we will be using the react useState hook to accomplish the task. PrerequisitesReact JSReact JS function

How to use Portal Component in ReactJS ?

The portal component renders its children into a new subtree outside the current DOM hierarchy. Material UI for React has this component available for us, and it is very easy to integrate. We can use the Portal Component in ReactJS using the following approach. Prerequisites:NodeJS or NPMReact JSMat

How to use Grow Component in ReactJS?

Grow Component in ReactJS adds a Grow animation to a child element or component. Material UI for React has this component available for us, and it is very easy to integrate. We can use the Grow Component in ReactJS using the following approach. PrerequisitesReact JSMaterial UIApproachTo implement th

How to set up the Provider Component in a React application ?

In React applications, the Provider component is often used in conjunction with context to provide data to components deep down in the component tree without having to explicitly pass props through every level of the tree. Prerequisites:JavaScriptReactNode & NPMSteps to Create React Application:

How to Pass Data from One Component to Another Component in ReactJS?

In ReactJS, components are the building blocks of your user interface. Components allow you to create modular, reusable UI elements, but sometimes these components need to communicate with each other. In this article, we will explore the different methods to pass data between components in ReactJS.

Corporate & Communications Address:

A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)

Registered Address:

K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305

Advertise with us

Company
About Us
Legal
Privacy Policy
In Media
Contact Us
Advertise with us
GFG Corporate Solution
Placement Training Program

Languages
Python
Java
C++
PHP
GoLang
SQL
R Language
Android Tutorial
Tutorials Archive

DSA
Data Structures
Algorithms
DSA for Beginners
Basic DSA Problems
DSA Roadmap
Top 100 DSA Interview Problems
DSA Roadmap by Sandeep Jain
All Cheat Sheets

Data Science & ML
Data Science With Python
Data Science For Beginner
Machine Learning
ML Maths
Data Visualisation
Pandas
NumPy
NLP
Deep Learning

Web Technologies
HTML
CSS
JavaScript
TypeScript
ReactJS
NextJS
Bootstrap
Web Design

Python Tutorial
Python Programming Examples
Python Projects
Python Tkinter
Python Web Scraping
OpenCV Tutorial
Python Interview Question
Django

Computer Science
Operating Systems
Computer Network
Database Management System
Software Engineering
Digital Logic Design
Engineering Maths
Software Development
Software Testing

DevOps
Git
Linux
AWS
Docker
Kubernetes
Azure
GCP
DevOps Roadmap

System Design
High Level Design
Low Level Design
UML Diagrams
Interview Guide
Design Patterns
OOAD
System Design Bootcamp
Interview Questions

Inteview Preparation
Competitive Programming
Top DS or Algo for CP
Company-Wise Recruitment Process
Company-Wise Preparation
Aptitude Preparation
Puzzles

School Subjects
Mathematics
Physics
Chemistry
Biology
Social Science
English Grammar
Commerce
World GK

GeeksforGeeks Videos
DSA
Python
Java
C++
Web Development
Data Science
CS Subjects

@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

Improvement

Suggest Changes

Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.

geeksforgeeks-suggest-icon

Create Improvement

Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.

geeksforgeeks-improvement-icon

Suggest Changes

min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences

Admission Experiences

Career Journeys

Work Experiences

Campus Experiences

Competitive Exam Experiences