How to pass a specific prop when the props can have multiple types in React, Typescript?

Question

Props Interface with data of different types:

interface ResultProp {
    type: string
    data: {} | AProp | BProp | CProp | DProp
}

Cardview will pass props data to respective component based on the props.type:

const Cardview:React.FC<ResultProp> = (props) => {
    const renderComponent = () => {
        switch(props.type){
            case "aprop":
                return <A {...props.data} />    // Type mismatch here
            // rest of the types ...
        }
    }
    return (
        <div className="cardview">
            {() => renderComponent}
        </div>
    )
}

Component receiving props from Cardview:

const A: React.FC<AProp> = (props) => {
    return (
        <div>
        </div>
    )
}

Answer 1

In order for TypeScript to understand the relationship between props.type and props.data, you need to use a discriminated union:

type ResultProp = {type: "aprop", data: AProp} | {type: "bprop", data: BProp} | ...;