React Typescript No index signature with a parameter of type 'string' was found on type

Question

I am trying to add and remove Form fields dynamically and I got stuck on assigning a value for an object property, by getting the following error on newParams[index][name] = e.currentTarget.value:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'AssetParam'. No index signature with a parameter of type 'string' was found on type 'AssetParam'.

This is my code:

import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";

interface AssetParam {
    name: string,
    value: string
}

export default function NewAssetComponent() {
    const [params, setParams] = useState<AssetParam[]>([])

    const handleParamChange = (index: number, e: React.FormEvent<HTMLInputElement>) => {
        let newParams = [...params];
        const name = e.currentTarget.name;
        const param = newParams[index];
        newParams[index][name] = e.currentTarget.value;
    }

    const addParam = () => {
        setParams([...params, { name: "", value: "" }])
    }

    return (
        <>
            <div className="mt-5 container">
                <Form>
                    {params.map((param, index) => (
                        <div className="params">
                            <Form.Group className="mb-3 col-md-3" controlId="paramName">
                                <Form.Label>Name</Form.Label>
                                <Form.Control name="paramName" value={param.name || ""} type="text" placeholder="Enter Name" onChange={e => handleParamChange(index, e)} />
                            </Form.Group>

                            <Form.Group className="mb-3 col-md-3" controlId="paramValue">
                                <Form.Label>Value</Form.Label>
                                <Form.Control name="paramValue" value={param.value || ""} type="text" placeholder="Enter Value" onChange={e => handleParamChange(index, e)} />
                            </Form.Group>
                        </div>
                    ))}
                    <Button onClick={addParam}><i className="bi bi-plus-lg"></i>Add Param</Button>
                </Form>
            </div>
        </>
    )
}

How can I fix this?

k.tten · Accepted Answer · 2022-05-03 14:23:30Z

3

Probably the simplest is to use a cast:

newParams[index][name as keyof AssetParam] = e.currentTarget.value;

as is used to cast, or assert to TypeScript that it will be this type. You want to be able to use name to index into AssetParam so you cast it to a key of AssetParam.

answered May 3, 2022 at 14:23

k.tten

26.8k4 gold badges34 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Azhar Uddin Sheikh Over a year ago

thanks, your's solution for me as well, is it a kind of hack? or do typescript has a better approach for handling this kind of situation

k.tten Over a year ago

@AzharUddinSheikh You could also type the object you are indexing into with an index signature.

Azhar Uddin Sheikh Over a year ago

can you please update the answer? with an example

Collectives™ on Stack Overflow

React Typescript No index signature with a parameter of type 'string' was found on type

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related