How to have a React child component call a function from a parent component

Question

I have a parent component and a child component (as a separate component file). How would I go about calling a function in the parent component from the child component?

The child component is imported into the parent component and the parent component has a function that makes an API call. I would like the child component to be able to also reach into the parent and run the api call function.

I could post the code I have but it's simply making an API call in the parent and having the child component imported in the parent.

thanks for any help.

Does this answer your question? Passing a function as a prop to a functional component — Emile Bergeron
– Emile Bergeron, Commented Feb 10, 2022 at 17:44

Apolo · Accepted Answer · 2022-02-10 16:45:36Z

1

Provide the function as a property on the child element:

const Parent = () => {
  const someFunction = () => { /*...*/ };

  return <Child someProp={someFunction}/>;
}

const Child = ({ someProp }) => {
  return (
    <div onClick={() => someProp()}>
      Hello World
    </div>
  );
}

answered Feb 10, 2022 at 16:45

Apolo

4,0162 gold badges26 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hanumanDev Over a year ago

perfect, thanks!

Collectives™ on Stack Overflow

How to have a React child component call a function from a parent component

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related