Looking for a way to incorporate an interface for this array of objects that is being passed as a prop.
const playersData = [
{
id: 1, // Will always be a number (provided by user)
extraNode: <ExampleComponent />, // Optional React component sent by user
// The following values can vary based on what the database sends.
// They are always strings but can include other properties like height, age, etc.
position: '1',
player: 'Miroslav Klose',
goals: '16',
games: '24',
country: 'Germany',
},
{
id: 2,
extraNode: <ExampleComponent />,
position: '2',
player: 'Ronaldo',
goals: '15',
games: '19',
country: 'Brazil',
},
];
The id will consistently be a number and extraNode will be a React Component if provided. The challenge lies in handling the dynamic nature of other key-value pairs such as age, height, etc.
I attempted the following code, but encountered an error:
export interface tableData {
id: number;
extraNode?: React.ReactNode;
[key: string]: string;
}
export interface TableProps extends HTMLAttributes<HTMLDivElement> {
tableData: tableData[];
}