React, Typescript, and a setState({ [name]: value }) error

Question

I have a couple create-react-app + TypeScript apps that I've been working on over the past few months. At some point (I probably upgraded the lib) tslint started throwing errors on this.setState({ [name]: value }) when state is given a type. It used to let it slide (unless I'm going crazy... not out of the question).

The only way to get tslint to shut up about it, is to change the state type to any, which I don't want to do. If I save the file and let yarn start pick up the change, it runs fine... so I'm able to ignore the error that tslint throws in vscode.

I understand WHY tslint is throwing an error. I'm wondering if there's a rule I can set to ignore this particular error?

Example of where I see this (line 5):

class MyComponent extends React.Component<IMyComponentProps, IMyComponentState> {
...
private handleOnChange = (event: any) => {
    const { name, value } = event.target;
    this.setState({ [name]: value });        <-- tslint no likey
}

The error:

[ts] Argument of type '{ [x: number]: any; }' is not assignable to parameter of type 'IMyComponentState| ((prevState: Readonly, pro...'. Type '{ [x: number]: any; }' is not assignable to type 'Pick

Aidan Hoolachan · Accepted Answer · 2018-07-18 20:31:32Z

6

class MyComponent extends React.Component<IMyComponentProps, IMyComponentState> {
...
private handleOnChange = (event: any) => {
    const { name, value } = event.target;

    // @ts-ignore
    this.setState({ [name]: value });        <-- tslint no likey
}

edited Jul 18, 2018 at 20:31

answered Jul 18, 2018 at 19:50

Aidan Hoolachan

2,4191 gold badge14 silver badges14 bronze badges

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

5 Comments

Kizmar Over a year ago

vscode doesn't seem to be responding to that comment. Could it be because this is an error and not a warning/suggestion?

Aidan Hoolachan Over a year ago

did you remove the <optional rule identifier> ?

Kizmar Over a year ago

Yes :) Maybe this is an issue with vscode's tslint extension.

Aidan Hoolachan Over a year ago

hmm, just tried in vscode and it looks like // @ts-ignore works

Aidan Hoolachan Over a year ago

Not sure where I found it, but it appears to come straight from the ts docs after ts 2.6: typescriptlang.org/docs/handbook/release-notes/…

davbuc · Accepted Answer · 2018-10-10 21:16:03Z

5

You'd use this solution here too:

interface IState {
    [key: string]: any; // or the type of your input
}

I guess thats better than just ignoring the warnings.

answered Oct 10, 2018 at 21:16

davbuc

5376 silver badges14 bronze badges

1 Comment

Kizmar Over a year ago

Marking this as the proper solution, rather than peppering // @ts-ignore comments all over the place. Thank you!

Akshay Vijay Jain · Accepted Answer · 2022-02-12 12:48:59Z

0

You can add property [key: string]: any; to existing interface declaration IMyComponentState i.e

interface IMyComponentState{
  ...existing fields,
  [x:string]:any
}

answered Feb 12, 2022 at 12:48

Akshay Vijay Jain

16.3k9 gold badges73 silver badges85 bronze badges

Collectives™ on Stack Overflow

React, Typescript, and a setState({ [name]: value }) error

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related