Getting error while creating generic type component

[clever ridge]

Hi, I am trying to create ShowTable as generic component, but I am getting the error. Could anyone please help?

[celest gorge]

!screenshot

[mighty leaf]

`!screenshot`:

Rather than screenshots, please provide either code formatted as:

```ts
// code here
```
Or even better, as an example on the TypeScript playground that is as simple as possible and reproduces the issue. This makes it easier to help you and increases the chances of getting an answer.

[celest gorge]

@clever ridge ^

[clever ridge]

//Code in ShowTable.tsx

import React from 'react';
import {
  MantineReactTable,
  useMantineReactTable,
  MRT_ColumnDef
} from 'mantine-react-table';
import {CropData, YieldData} from '../crop';

type OptionValue = CropData | YieldData

type Props<T extends OptionValue> = {
  columns:T[],
  data:T[]
}

const ShowTable:React.FC<T extends OptionValue> = ({columns, data}:Props<T>) => {

  const table = useMantineReactTable({  
    columns,
    data: data
  });

  return <MantineReactTable table={table} />;
}

export default ShowTable

//code in CropProduction.tsx

import {useMemo} from 'react';
import {minAndMaxCropProduction} from '../cropAnalysisCalculations';
import ShowTable from './ShowTable';
import { type MRT_ColumnDef} from 'mantine-react-table';
import {CropData} from '../crop';

export default function CropProduction(){
  const data:CropData[] = minAndMaxCropProduction
  const columns = useMemo<MRT_ColumnDef<CropData>[]>(
    () => [
      {
        accessorKey: 'year', //access nested data with dot notation
        header: 'Year',
      },
      {
        accessorKey: 'maxProductionCrop',
        header: 'Crop with Maximum Production in that Year',
      },
      {
        accessorKey: 'minProductionCrop', //normal accessorKey
        header: 'Crop with Minimum Production in that Year',
      },
    ],
    [],
  );
   return <>
    <ShowTable columns ={columns} data={data}/>
   </>
}

//code in AverageYield.tsx

import {useMemo} from 'react';
import {averageCropYield} from '../cropAnalysisCalculations';
import ShowTable from './ShowTable';
import {YieldData} from '../crop';
import { type MRT_ColumnDef} from 'mantine-react-table';

export default function AverageYield(){
  const columns = useMemo<MRT_ColumnDef<YieldData[]>[]>(
    () => [
      {
        accessorKey: 'CropName', //access nested data with dot notation
        header: 'Crop',
      },
      {
        accessorKey: 'averageOfYieldOfTheCrop',
        header: 'Average Yield of the Crop between 1950-2020',
      },
      {
        accessorKey: 'averageOfCultivationAreaOfTheCrop', //normal accessorKey
        header: 'Average Cultivation Area of the Crop between 1950-2020',
      }
    ],
    [],
  );
   return <>
    <ShowTable columns ={columns} data={averageCropYield}/>
   </>
}

@celest gorge Could you please check. I am passing column and data props to ShowTable component from AverageYield and CropProduction components.

Types I defined in Crop.ts file which I am importing in AverageYield and CropProduction Component

export type YieldData = {
    CropName:string;
    averageOfYieldOfTheCrop:string;
    averageOfCultivationAreaOfTheCrop:string;
  }

export type CropData = {
    year:string;
    maxProductionCrop:string;
    minProductionCrop:string;
  }

@celest gorge Just for your reference on mantine table doc
https://www.mantine-react-table.com/docs/examples/basic

I want this ShowTable to display 2 tables based on props

These errors I am getting

[celest gorge]

On this line:

const ShowTable:React.FC<T extends OptionValue> = ({columns, data}:Props<T>) => {
``` instead of writing `T` you have to supply an actual type.

Also this:

type Props<T extends OptionValue> = {
  columns:T[],
  data:T[]
}
``` doesn't seem right

@clever ridge ^

[clever ridge]

I am supplying two different types, 1 YieldData from AverageYield Component.
2nd CropData from CropProduction Component

[clever ridge]

which one I need to pass here instead of T?

[clever ridge]

I am okay to remove, but it doesnt resolve much

[celest gorge]

Why did you define both columns and data to be of the same type?

It doesn't look like they should be the same.