how to call a function contained within a direct child component from the parent? (functional components)

Question

I am new to react. Basically I want that when I click on the button of the child component, the function myFunction is called from the parent component. How can I do it?

This is my live code

import "./styles.css";
export const Parent = ({ children }) => {
  //I need excecute myFunction when user click
  return (
    <div>
      I am parent <br />
      <br /> {children}
    </div>
  );
};
export const Child = () => {
  const myFunction = () => {
    console.log("say hello from parent");
  };
  return (
    <div>
      I am children
      <br />
      <button>Send function to execute in the parent</button>
    </div>
  );
};

export default function App() {
  return (
    <Parent>
      <Child />
    </Parent>
  );
}

Does this answer your question? [Call child method from parent](https://stackoverflow.com/questions/37949981/call-child-method-from-parent) — Emile Bergeron, Mar 23 '22 at 05:45
@EmileBergeron To be honest, it confuses me a bit. In my case I have functional components and a recent version of react. I know it will be helpful for future people with a problem like mine. — yavgz, Mar 23 '22 at 05:50
The [first answer](https://stackoverflow.com/a/37950970/1218980) addresses exactly this, recent version of React with hooks. — Emile Bergeron, Mar 23 '22 at 05:52
But the most important thing you should get from that answer is that it's probably not what you want. You're probably better off [lifting the state up](https://reactjs.org/docs/lifting-state-up.html). — Emile Bergeron, Mar 23 '22 at 05:53

score 0 · Answer 1 · answered Mar 23 '22 at 06:18

Try calling child inside parent function as shown below :

import "./styles.css";

export const Child = (props) => {
  const myFunction = () => {
    console.log("say hello from parent");
  };
  return (
    <div>
      I am children
      <br />
      <button onClick={props.randomFun}  >Send function to execute in the parent</button>
    </div>
  );
};

export const Parent = () => {
  //I need excecute myFunction when user click
  const handleChild=()=>{console.log("You clicked on child button")}
  return (
    <div>
      I am parent <br />
      <br /> 
      <child randomFun = {handleChild} />
    </div>
  );
};

export default function App() {
  return (
    <Parent />
  );
}

score 0 · Answer 2 · answered Mar 23 '22 at 06:53

We can use useRef,

Here we have a parent component with a button and a child component with a function to show an alert. If you want to call the showAlert function when the button is clicked, there is no direct way to access it.

import { forwardRef, useRef, useImperativeHandle } from "react"

const ChildComp = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    showAlert() {
      alert("Hello from Child Component")
    },
  }))
  return <div></div>
})

function App() {
  const childCompRef = useRef()
  return (
    <div>
      <button onClick={() => childCompRef.current.showAlert()}>Click Me</button>
      <ChildComp ref={childCompRef} />
    </div>
  )
}

export default App

score -1 · Answer 3 · answered Mar 23 '22 at 06:27

you want this?

export const Child = () => {
   const myFunction = () => {
    console.log("say hello from parent");
  };
  return (
    <div>
      I am children
      <br />
      <button onClick={()=>myFunction()}>Send function to execute in the parent</button>
    </div>
  );
};

how to call a function contained within a direct child component from the parent? (functional components)

3 Answers3