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
  high: string
}

And as is a common pattern in React, my event handler is:

handleChange = (e) => {
  let { name, value } = e.target;
  this.setState({ [name]: value });
};

With high and low as name attributes on my inputs. Typescript is erroring with:

Argument of type '{ [x: string]: string; }' is not assignable to parameter of type 'Pick<State, "low" | "high">'

Is there a way for me to tell Typescript that I only expect those 2 values? I'd like to avoid explicitly passing the key into the handler but don't want to change the state to something like:

{
  low: string
  high: string
  [key: string]: string
}

Amid · Accepted Answer · 2017-09-19 18:07:23Z

15

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);

answered Sep 19, 2017 at 18:07

Amid

22.5k6 gold badges63 silver badges59 bronze badges

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

1 Comment

Carl Vitullo Over a year ago

Great answer, thanks for the issue links and workaround. as any should work fine here.

Collectives™ on Stack Overflow

Dynamic object key with Typescript in React event handler

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related