1

I'm new to React and Typescript. I'm trying to read information from the config file based on the input(props), but the Typescript seems not to accept. Do you have any idea how to work with that?

config.json

{
 "table_headers": {
    "appointments": [
        {
            "label": "ID",
            "id": "id",
            "minWidth": 30
        },
        {
            "label": "Name",
            "id": "name",
            "minWidth": 70
        }
  ...

TableComponent.tsx

interface TableComponentProps {
    headerType: string,
    rows: string
}
export default function TableComponent(props: TableComponentProps) {
    const [header] = useState(config.table_headers[props.headerType].map((header) => header)) // Here getting the error

error content

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ appointments: { label: string; id: string; minWidth: number; }[]; }'. No index signature with a parameter of type 'string' was found on type '{ appointments: { label: string; id: string; minWidth: number; }[]; }'.ts(7053)

Itaru
  • 33
  • 4
  • 1
    You need to give a type to the `table_headers` object's keys, just like in this answer: https://stackoverflow.com/a/63342052/3970387 – Drarig29 Nov 09 '21 at 00:21

1 Answers1

0

As Drarig29 commented, editing TableComponent.tsx to the below code solved it.

interface TableComponentProps {
    headerType: 'appointments' | string,
    rows: string
}

Thank you!

Itaru
  • 33
  • 4