Typescript React Passing parameter to setState

Question

I am a beginner and I am doing this...

<i className="fa fa-trash-alt" onClick={() => this.handleDelete("trippurpose")} />

My handle delete is written like this...

handleDelete(whichitem: string) {
    // this handles someone changing an input text field
    console.log(whichitem);

    if (whichitem === "trippurpose") {
      this.setState({
        trippurpose: "",
      });
    } else if (whichitem === "projecttask") {
      this.setState({
        projecttask: "",
      });
    }
  }

What's I'd prefer to do is...

  handleDelete(whichitem: string) {
    // this handles someone changing an input text field

      this.setState({
        [whichitem]: "",
      });
  
    }

But when I do that I get an error... Argument of type `{[x: string]: string; }' is not assignable to parameter of type 'TemplatePopoverState | ((prevState: Readonly, props... and much more...

From reading up it seems that doing the [whichitem].

      this.setState({
        [whichitem]: "",
      });

Is the correct way to go but I suspect it's something in the method parameters that is wrong - any hints? As I said I am a complete novice..The ultimate goal is to call a function that pass a string that reflects the value of the input text field I want to clear (set to "").

Please share whole example

captain-yossarian from Ukraine
– captain-yossarian from Ukraine

2021-03-21 14:44:03 +00:00
Commented Mar 21, 2021 at 14:44 — captain-yossarian from Ukraine
– captain-yossarian from Ukraine, Commented Mar 21, 2021 at 14:44

Shubham Khatri · Accepted Answer · 2021-03-21 15:06:36Z

1

While setting dynamic value to setState, you need to specify the key to be one among the state keys, you can write the above funcition like

handleDelete(whichitem: keyof TemplatePopoverState) {
    // this handles someone changing an input text field

      this.setState({
        [whichitem]: "",
      } as Pick<TemplatePopoverState, keyof TemplatePopoverState>);
  
    }

For more reference refer this github issue.

edited Mar 21, 2021 at 15:06

answered Mar 21, 2021 at 14:56

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

1 Comment

Richard C Over a year ago

I had to make a small addition...adding as unknown (which someone mentioned in that github link). That's well above my knowledge base so THANK YOU. ``` handleDelete(whichitem: keyof TemplatePopoverState) { // this handles someone changing an input text field console.log(whichitem); this.setState(({ [whichitem]: "", } as unknown) as Pick<TemplatePopoverState, keyof TemplatePopoverState>); } ```

Collectives™ on Stack Overflow

Typescript React Passing parameter to setState

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related