Send data from Child to Parent – React Functional Component

How to send and communicate from child component to parent component in React JS. Send data from child component to parent components. Execute functions in parent component from child component react app.

React JS – Child to Parent Communication – Example Code

ParentComponent.tsx

import React from 'react';
import ChildComponent from './ChildComponent';

export const ParentComponent = () => {

    const printFileName = (fileName) => {
        console.log("Printing from Parent:" + fileName)
    };

  return (
    <ChildComponent  doPrinting={printFileName} />
  );
};

ChildComponent.tsx

import React from 'react';

export const ChildComponent = ({ doPrinting }: { doPrinting: (arg1: string) => void }) => {

  let title = "music"

  return (
        <Button onClick = {() => doPrinting(title)}>
            Print Data
        </Button>
    );
};

Here in our React app, we are sending data from the child component to the parent component. So we are sending the data and executing a function in the parent component from the child component of our App.