React makes it easy to pass data down from parent to child components. However,what if you need to pass data in the opposite direction?

Pass data from child to parent in 3 steps

  1. Define a function in parent component

You can pass it down to child components and handle user events, giving you access to input values.

const [email, setEmail] = useState("");
const handleEmailChange = (e) => setEmail(e.target.value);

2. Pass the function to child via props

<div>
     <h1>Fill our form</h1>
     <EmailField handler={handleEmailChange} />
     <p>Current Email Is: {email}</p>
   </div>

3. Call the function in the child

Access the event handler via props and use it:

<div>
     <input type="text" onChange={(e) => props.handleEmailChange(e)} />
</div>

All event handlers receive one argument – SyntheticEvent. It contains information about the event that occured.

Because handleEmailChange is defined in the parent component, it will update the state there.

This is how to take input data and pass it from child to parent in React.

Background

Let’s say you have a Form component, and multiple children components for text, number, authentication, or any other type of component.

It’s a good practice to have single source of truth. In other words, store input values for individual inputs in the parent component’s state. But you still need to get these values in child components.

The trick is to create an event handler (a function) in the parent component and pass it down to child components.

In child components, pass input data (from SyntheticEvent) into the event handler. When called, these functions will update the state in the parent component where they are defined.

Essentially, you are updating parent component’s state via calling event handler that is passed to child component via props.

Example: Pass data from child component to parent in React

We have a Form component, where we defined an event handler. We’ve also created a child EmailField component.

We use the useState() hook to create a email state variable and a function to update it.

The event handler is passed down to the child EmailField component via props.

function Form() {
  const [email, setEmail] = useState("");
  const handleEmailChange = (e) => setEmail(e.target.value);
  return (
    <div className="App">
      <h1>Fill our form</h1>
      <EmailField handler={handleEmailChange} />
      <p>Current Email Is: {email}</p>
    </div>
  );
}

function EmailField(props) {
  return (
    <div className="App">
      <p>Email:</p>
      <input type="text" onChange={(e) => props.handler(e)} />
    </div>
  );
}

Child component receives event handler via props.

We set onChange on input to run event handler every time there’s a change in the field. We take SyntheticEvent instance and pass it as an argument to the handler passed down via props.

Because the event handler is defined in the parent component, it updates state in the parent component.

The Form component also displays current email value to show that the child component indeed passes data to parent in React.

Why you would pass data from child to parent

When dealing with event handlers, sometimes data is collected in child component, but is stored in parent component’s state (for the sake of having a single source of truth). Props only allow data to be passed down, not to be passed from child to parent.

Handling Events