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

How do I set my custom React component as a Type passed to the prop of another component?

$
0
0

I'm making a GenericModal component with some custom styling. I want to pass an array of my ModalText components as props to GenericModal and have it display them. I'd like to be specific that this is the type I'm passing rather than doing something generic like React.FC.

If I do

type Props = PropsWithChildren<{    paneContents: ModalText[];}>

I get an error ModalText refers to a value but is being used as a type here. Did you mean typeof ModalText.

If I use typeof ModalText[] then I get an error when I use it:

<View>    {props.paneContents}</View> 

saying TS2769: No overload matches this call. '(props: ViewProps | Readonly<ViewProps>): View', gave the following error. Type 'FC<Props>[]' is not assignable to type 'ReactNode'.

Is there a way to do this? Or do I just have to use React.FC as the type and put in the comments that it's meant to be a ModalText?

Edit

Here's the ModalText component, if that helps:

type Props = PropsWithChildren<{    style?: ViewStyle;    header?: string;    body?: string;}>;const ModalText: React.FC<Props> = (props) => {    return (<View style={[style.container, props.style]}>            {props.header && <Text style={style.modalHeader}>{props.header}</Text>}            {props.body && <Text style={style.modalText}>{props.body}</Text>}</View>    );};

Viewing all articles
Browse latest Browse all 6287

Trending Articles



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