In this article going to show how we can pass function between components.

This is very simple in react

In this example we pass a function App component to Profile component

 

App component

import React from "react";
import Profile from "./compontents/Profile";

export default function App() {

  const sayHello = () => {
    alert("Hi, I am a function from app component")
  }

  return (
    <>
      <Profile sayHello={sayHello}></Profile>
    </>
  );

}

 

Profile component

import React from "react";

export default function Profile({ sayHello}) {

  return (
    <>
      <button onClick={sayHello}>Click here</button>
    </>
  );

}