How can a React child component pass values to a parent component?

1 year ago
Noah Thompson
3 minutes

In React, there are two ways to pass values from child components to parent components.

  1. Through callback functions, a parent component can pass a callback function to a child component via props. The child component can then call this callback function and pass parameters to pass values back to the parent component.

Example code for parent component:

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [value, setValue] = useState('');

  const handleChildValue = (childValue) => {
    setValue(childValue);
  };

  return (
    <div>
      <ChildComponent onValueChange={handleChildValue} />
      <p>Value from child component: {value}</p>
    </div>
  );
}

export default ParentComponent;

Example code for child component:

import React, { useState } from 'react';

function ChildComponent({ onValueChange }) {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
    onValueChange(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
    </div>
  );
}

export default ChildComponent;

In the example above, the ChildComponent receives a prop called onValueChange, which is a callback function. When the value of the input box in the child component changes, the handleChange function is called and passes the input value to the onValueChange callback function, thus passing the value back to the parent component.

  1. Using context:
    The parent component can pass values to the child components by creating a Context and placing the required values in the Context’s Provider. Child components can retrieve these values using the Context’s Consumer.

Example code of the parent component:

import React, { useState } from 'react';
import { MyContext } from './MyContext';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [value, setValue] = useState('');

  return (
    <div>
      <MyContext.Provider value={value}>
        <ChildComponent />
      </MyContext.Provider>
      <p>Value from child component: {value}</p>
    </div>
  );
}

export default ParentComponent;

Example code for subcomponents:

import React, { useContext, useState } from 'react';
import { MyContext } from './MyContext';

function ChildComponent() {
  const value = useContext(MyContext);
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>Value from parent component: {value}</p>
    </div>
  );
}

export default ChildComponent;

In the example above, the parent component, ParentComponent, creates a MyContext and places a value in the value attribute of MyContext.Provider. The child component, ChildComponent, uses useContext to retrieve the value of MyContext and displays it on the page. The child component can also update the state value of inputValue through the onChange event of the input, but this value only exists in the child component and is not passed to the parent component.

bannerAds