Dynamic object key with Typescript in React event handler

Question

Similar but distinct from How do I dynamically assign properties to an object in TypeScript?

I have a component with the state type:

{
  low: string
         


        

Answer 1

In the perfect world we should be able to write something like this:

private handleChange = (e: {target: {name: "low" | "high", value: string}}) =>
{
    const { name, value } = e.target;

    this.setState({[name]: value});
}

But unfortunately a reported bug (see here or here) force us to use some temp workaround like casting to any or such:

this.setState({[name]: value} as any);