Pass data from child to parent component in React

In this article, we are discussing how to Pass data from the child to the parent component in React. Basically React is designed to have a unidirectional data flow, which means data from parent to child component. But in many cases, we may want to pass data from the child to the parent component.  For example, we may want to pass data from the child component to the parent component on a button click in the child component.  We can follow the below steps to pass data from the child to the parent in React.

  1. Create a function that can update the state in the parent component. 
  2. Pass this function into the child component as a prop. 
  3. Call this function from the child component and pass the data as arguments. 
  4. Access the data as arguments in the function in the parent component.

Let us dive deep into the above steps with examples.

import { useState } from 'react';
const ParentComponent = () => {
  	const [message, setMessage] = useState("Hello");
	
  	const changeMessage = (newMessage) => {
    	setMessage(newMessage);
  	}
	
  	return (
    	<>
      		<label>{message}</label>
      		<ChildComponent changeMessage={changeMessage}/>
    	</>    
  	);
};
const ChildComponent = ({changeMessage}) => {
  	const ClickHandler = () => {
    	changeMessage("Goodbye!");
  	}
	
  	return (
    	<button onClick={ClickHandler}>Show Goodbye</button>
  	);
};

In the above code example, the initial state in message variable in the parent component was "hello" and it was displayed in the label. The parent component defines the function changeMessage which takes newMessage as arguments and the message state gets updated. Data can be passed from the parent to the child component via props. Any properties of the parent component, like variables or functions can be passed to the child component as props. So, this changeMessage function can be passed into the child component as a prop, so that the child component can call this function and can pass any data into the parent. 

In the child component,  we destructure the props so that we can get changeMessage function directly without the prop variable. When the button has clicked the changeMessage function was invoked from its clickHandler and passed the data as arguments. The changeMessage function actually updates the state of the parent component from the child component.

We can also pass an event object as a parameter into the function to use it in the parent component.

We can use this method to pass anything from a child component to a parent component in React.

In large applications, sharing data with multiple components may be difficult by passing functions as props. In such cases, we can use a global store such as redux and the context API.

Conclusion

To pass data from child to parent component in React, define a function in the parent component that can take arguments and update the state in the parent component. Pass this function into the child component as a prop. In any event, invoke the function from the child component and pass data into the parent component as an argument.

Related Blogs

ckeditor

How to Integrate Custom Build CKEditor5 with React

Explains how to create a custom build CKEditor5 and integrate with react with sample code.

Objects Are Not Valid as a React Child

React objects are not valid as a react child

The React error "Objects are not valid as a React child" occurs when we render an object or an array in our JSX code. We can't use JavaScript objects as a child in React.

Can't Perform a React State Update on an Unmounted Component

Can't Perform a React State Update on an Unmounted Component

React Warning “Can't perform a react state update on an unmounted component” is caused when we try to update the state after the component was unmounted. Explains how to fix it.

Each child in a list should have a unique key prop

Each child in a list should have a unique key prop

Solve Warning: Each child in a list should have a unique ”key" prop in React by setting the id property as a unique key or by auto-assigning unique keys.

React Hook is Called Conditionally

React Hook is Called Conditionally

Error: "React Hook is called conditionally. React Hooks must be called in the exact same order in every component render" occurs when hooks are invoked conditionally or after a return of a value.

Too many re-renders. React limits the number of renders to prevent an infinite loop

Too many re-renders. React limits the number of renders to prevent an infinite loop

The React error "Too many re-renders. React limits the number of renders to prevent an infinite loop" happens when you have reached an infinite render loop.

Adjacent JSX elements must be wrapped in an enclosing tag

Adjacent JSX elements must be wrapped in an enclosing tag

The "Adjacent JSX elements must be wrapped in an enclosing tag" error can be solved by wrapping the multiple elements in a parent div or in a react fragment

The tag is unrecognized in this browser

Warning: The tag is unrecognized in this browser

Warning "The tag is unrecognized in this browser" occurs when the tag doesn't exist in the browser or when we render a component starting with a lowercase letter.

The style prop expects a mapping from style properties to values, not a string

The style prop expects a mapping from style properties to values, not a string

"The style prop expects a mapping from style properties to values, not a string" React error occurs when we pass a CSS string to the style attribute.