CODEWITHSUNDEEP
reactjstypescriptformsinputsetstate
Shbdn
Shbdn

Reputation: 17

How to access object dynamically with event.target.name in react typescript?

When accessing the object dynamically using event.target.name I get an error like the following:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Partial<Lines>'.
  No index signature with a parameter of type 'string' was found on type 'Partial<Lines>'.ts(7053)

My code now:

type Lines = {
  product_id: string | number;
  product_name: string;
  quantity: number;
  unit_of_measure: string;
}

type Transfer = {
  type: string;
  from_name: string;
  from_id: string | number;
  to_name: string;
  to_id: string | number;
  lines: Partial<Lines>[];
}

const [transfer, setTransfer] = useState<Transfer>({  
    type: 'option', from_name: '', to_name: '', from_id: '', to_id: '', 
    lines: [{ product_id: '', product_name: "", quantity: 0, unit_of_measure: "" }]
  });

const handleInputChange = (index: number, event: { target: HTMLInputElement }) => {
    const values = [...transfer.lines];
    values[index][event.target.name] = event.target.value; //the error is here
    
    setTransfer((prevLine) => {
      return {...prevLine, lines: values}
    });
};

When accessing using this code is still an error, what is the right way to access it? Thanks.

values[index][event.target.name] = event.target.value;

Upvotes: 0

Views: 1148

Answers (1)

Shbdn
Shbdn

Reputation: 17

Solved, I changed this code

const key = event.target.name;

to use type assertion

const key = event.target.name as keyof Lines;

Upvotes: 1

Related Questions