Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How to annotate a react functional component with both props and states?

$
0
0

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?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>