React callback function

  • The callback function is passed as an argument to another function.
  • This allows data or functionality to be passed indirectly to the receiving function.
  • As a result of its event-driven nature, this pattern is suitable for asynchronous and event-driven programming.
  • Using callbacks, you can pass data from a child component to a parent component in JavaScript

  • The following steps will guide you through passing data via callbacks:

    Parent Component

  • Create a callback function for receiving the data from the child.
  • In this function, the data is passed as an argument and actions are performed (e.g., updating the parent state, triggering other actions).
  • Child Component

  • Callback functions are provided as props to child components. You can name this prop anything you wish (e.g., onDataChange, sendData).
  • In order to send data to the parent, you must call the callback function that was passed as a prop.
  • You can pass the data you want to send to the callback function as an argument.
  • The following example illustrates how you can accomplish this:

    import React, { useState } from 'react';
    import ChildComponent from './ChildComponent';
    const ParentComponent = () => {
      const [childData, setChildData] = useState(null);
      // Callback function to receive data from child
      const handleChildData = (data) => {
      const parentClick = () => {
        alert('Clicked in parent');
      return (
          <p>Data received from child: {childData}</p>
          {/* Pass callback function as prop */}
          <ChildComponent sendData={handleChildData}  pclick ={parentClick}/>
    export default ParentComponent;
    import React, { useState } from 'react';
    const ChildComponent = ({ sendData, pclick }) => {
      const [inputValue, setInputValue] = useState('');
      const handleChange = (event) => {
      const handleClick = () => {
        // Call the callback function and pass data to parent
      return (
          <input type="text" value={inputValue} onChange={handleChange} />
          <button onClick={handleClick}>Send Data</button>
          <button onClick={pclick}>p Data</button>
    export default Child;