Передача данных из дочернего компонента в родительский компонент в ReactJS

Передача данных от дочернего компонента к родительскому компоненту в React может быть достигнута с помощью функции обратного вызова, которая передается в качестве реквизита от родительского компонента к дочернему компоненту. Затем дочерний компонент может вызвать эту функцию обратного вызова, когда он хочет передать данные обратно родительскому компоненту.

Код дочернего компонента.

import React from 'react';

const ChildComponent = ({ onDataChange }) => {
  const handleDataChange = () => {
    onDataChange('Data from the Child');
  };

  return (
    <div>
      <button onClick={handleDataChange}> Send Data</button>
    </div>
  );
};

export default ChildComponent;

Код родительского компонента.

import React,{useState} from 'react';
const ParentComponent = () => {
  const [data, setData] = useState(null);

  const handleDataChange = (dataFromChild) => {
    setData(dataFromChild);
  };

  return (
    <div>
      <ChildComponent onDataChange={handleDataChange} />
      {data && <p> {data}</p>}
    </div>
  );
};

export default ParentComponent;

В этом примере ChildComponent получает реквизит с именем onDataChange, который является функцией обратного вызова. Когда пользователь нажимает кнопку в дочернем компоненте, вызывается функция handleDataChange, которая, в свою очередь, вызывает свойство onDataChange, передавая ему данные из дочернего компонента. Вызывается функция handleDataChange родительского компонента, которая обновляет состояние родительского компонента новыми данными.