I am building a react native application. I have a parent component and a child component. The child component has a button whose event handler is in the parent component. At the end of the event handler, I also have to update a particular state in the child component. So for that reason I made use of useRef
hook in parent component to create a reference of the child component. Now, the event handler function looks something like this
const handleJoin = async (community: TCommunity) => { // .......... childComponentRef.current.setIsDataManipulated(true); // ..........};
But I am getting a red squiggly line in setIsDataManipulated
and when I hover over it the following error appears
Property 'setIsDataManipulated' does not exist on type 'FC<TChildrenProps>'
This must be because typescript has no way of knowing that child component has the state that I am tryping to update. For now, I have only annotated the child component with props types and not states types. I have searched online and found that when using class based component, I can pass a second generic type like React.Component<TProps, TState>
to annotate both props and state. But how may I do so using React.FC
?