reactjs - how to dynamically build this table in react and typescript?

Question

I have the following React/Typescript code that I'm using to build a row which gets passed into a framework table component:

const row = ({ record }: RowProps) => <tr>
{
    <React.Fragment>
        <td key={'UserName'}>
            {record.UserName}
        </td>
        <td key={'UserEmail'}>
            {record.UserEmail} 
        </td>
    </React.Fragment>
}
</tr>

How can I make this generic using React/TypeScript? The example above uses the following RowProps definition for a User component:

interface RowProps {
    record: {
        UserName: string,
        UserEmail: string
    }
}

But let's say that I had a separate Product component with the following structure:

interface RowProps {
    record: {
        ProductId: number,
        ProductName: string,
        ProductDescription: string
    }
}

I'm looking for a clean, programmatic, dynamic way to generate the appropriate TD's based on the RowProps passed in. So in my second example above, the generic builder implementation would write out 3 TD's instead of 2, based on the extra record property.

question from:https://stackoverflow.com/questions/65944775/how-to-dynamically-build-this-table-in-react-and-typescript

Answer 1

Waitting for answers