0

I'm currently learning how use React with Typescript and came across this situation: I need to pass down a function to a child component as a prop, and let's say this is a quite complicated function with a punch of parameters. What do you think would be the best approach for this? If this is a Class Component I could just export the function type like this and have the child component implement it:

export type ParentFunction1 = Parent['function1'];
...
type ChildComponentProps = {
  handleClick: ParentFunction1;
}

But since I'm using Function Expression Components, the above method is not possible.

Any suggestion would be greatly appreciated!

Nam
  • 554
  • 4
  • 11
  • I would recommend you to define ParentFunction1 separately. Now your *ChildComponent* should know about the *Parent*, and it a lot of cases it could create problems with support in future – dm.shpak Jan 01 '21 at 18:02
  • Thank you for the reply! And yes I agree, this structure where one component rely a bit too much on the other seems very problematic, unfortunately the instructor that I'm currently watching is using this a lot... Do you have any suggestion on what I should research on for a better structure, any keywords so that I can look up would be appreciated! – Nam Jan 02 '21 at 01:35
  • 1
    Look for **SOLID**. It is not about the React but about the generic ideas and patterns. – dm.shpak Jan 02 '21 at 13:43
  • I will. Thanks again! – Nam Jan 02 '21 at 14:47

0 Answers0