Narrow type in look up table

[formal flare]

I have two similar components that share most of the type and are pulled from look up table.

export type CrmValidationTableProps = {
    orgId: string,
    crmProjectId: number,
    surveyId: string,
} & ({
    crmSystem: 'airtable'
    refinedData: AirtableExportRow[],
    editQuestionIdentifierHandler: (row: AirtableExportRow) => void
} | {
    crmSystem: 'salesforce'
    refinedData: SalesforceExportRow[],
    editQuestionIdentifierHandler: (row: SalesforceExportRow) => void
})

export function getCrmTables<T extends CrmValidationTableProps>(props: T): Record<crmSystem, React.ReactNode> {
    return {
        'salesforce': <SalesforceValidationTable {...props as T} />,
        'airtable': <AirtableValidationTable {...props as T} />,
    }
}

Now I use CrmValidationTableProps inside these react components too, I wonder how I can narrow them to their corresponding type, preferably using crmSystem

[unique coyote]

i don't understand what you're trying to do by making getCrmTables generic, and especially why you're asserting that props is T when that's the type it already has. i think more context would help

Now I use CrmValidationTableProps inside these react components too
can you show how?

I wonder how I can narrow them to their corresponding type, preferably using crmSystem
can you share the definition of crmSystem?

i made some guesses to help get you started, you can update this playground and then send me back the new link:

[sacred perch]

mkantor#0

Playground Link

Preview:```ts
import React from "react"

// i had to guess how to stub these out; they may be unrealistic:
type crmSystem = "salesforce" | "airtable"
type AirtableExportRow = {
airtable: string
stuff: number
}
type SalesforceExportRow = {
salesforce: number
things: string
}
...```

You can choose specific lines to embed by selecting them before copying the link.