How to Pass Props from Child to Parent in React: Simple Guide

In React, you pass data from a child to a parent by sending a function from the parent as a prop to the child. The child calls this function with data as an argument, letting the parent receive and use that data.

Syntax

To pass data from child to parent, the parent defines a function and passes it as a prop to the child. The child calls this function with the data to send it back.

• parentFunction: The function defined in the parent to receive data.
• onData: The prop name used to pass the function to the child.
• childData: The data sent from the child to the parent.

jsx

function Parent() {
  function parentFunction(childData) {
    console.log('Data from child:', childData);
  }

  return <Child onData={parentFunction} />;
}

function Child({ onData }) {
  const data = 'Hello Parent';
  return <button onClick={() => onData(data)}>Send to Parent</button>;
}

Example

This example shows a parent component that receives a message from its child when a button is clicked. The child calls the parent's function passed as a prop to send the message.

jsx

import React, { useState } from 'react';

function Parent() {
  const [message, setMessage] = useState('');

  function handleMessageFromChild(data) {
    setMessage(data);
  }

  return (
    <div>
      <h2>Message from Child: {message}</h2>
      <Child onSend={handleMessageFromChild} />
    </div>
  );
}

function Child({ onSend }) {
  const messageToSend = 'Hi Parent!';

  return (
    <button onClick={() => onSend(messageToSend)}>
      Send Message
    </button>
  );
}

export default Parent;

Output

Message from Child: 
[Button labeled 'Send Message']

After clicking button:
Message from Child: Hi Parent!

Common Pitfalls

Common mistakes when passing data from child to parent include:

• Not passing a function from the parent, so the child tries to call undefined.
• Forgetting to call the function in the child with parentheses and arguments.
• Trying to directly modify parent state from the child instead of using a callback.

Always pass a function as a prop and call it properly in the child.

jsx

/* Wrong way: child tries to call a non-function prop */
function Parent() {
  return <Child onSend={null} />; // onSend is not a function
}

function Child({ onSend }) {
  // This will cause an error: onSend is not a function
  return <button onClick={() => onSend('data')}>Send</button>;
}

/* Right way: pass a function from parent */
function Parent() {
  function receiveData(data) {
    console.log(data);
  }
  return <Child onSend={receiveData} />;
}

function Child({ onSend }) {
  return <button onClick={() => onSend('data')}>Send</button>;
}

Quick Reference

Tips for passing data from child to parent in React:

• Always define the callback function in the parent.
• Pass the callback as a prop to the child.
• Call the callback inside the child with the data as argument.
• Use useState in the parent to store and display the data.
• Ensure the callback prop is a function to avoid runtime errors.

Key Takeaways

Pass a function from parent to child as a prop to send data upward.

Call the parent's function inside the child with the data as argument.

Use React state in the parent to store and use data received from the child.

Never try to directly change parent state from the child; use callbacks instead.

Always check that the callback prop is a valid function before calling it.