Typescript React generic function type

Question

I have a case:

interface State {
   Mark: boolean;
   Jane: boolean;
}

React.Component<{}, State> {

   state = {
      Mark: false,
      Jane: false,
   };

   fn = (name: string) => () => {
      this.setState({ [name]: true });
                     ^^^^^^^^^^
   }

   render () {
      return
        ['Mark', 'Jane'].map((name) => <div onClick={this.fn(name)}>{name}</div>);

}

Im getting error:

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

I could do two separate functions for it, but I want to keep it generic. How could I make it generic so the error goes off?

The any type?

Matt Oestreich
– Matt Oestreich

2019-07-14 14:00:43 +00:00
Commented Jul 14, 2019 at 14:00 — Matt Oestreich
– Matt Oestreich, Commented Jul 14, 2019 at 14:00

Johnny Zabala · Accepted Answer · 2019-07-14 15:05:09Z

1

It turns out this is a limitation of the ts compiler itself. Check this issue for more on that: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/26635

Now to solve your problem you can use setState with a callback version. Like bellow:

interface State {
    Mark: boolean;
    Jane: boolean;
}

type StateKeys = keyof State

class Test extends React.Component <{}, State > {

    state = {
        Mark: false,
        Jane: false,
    };

    fn = (name: StateKeys) => () => {
        this.setState(prev => ({ ...prev, [name]: true }));
   }

   render() {
       return ['Mark', 'Jane'].map((name: StateKeys) => <div onClick={this.fn(name)}>{name}</div>);

    }
}

answered Jul 14, 2019 at 15:05

Johnny Zabala

2,4811 gold badge16 silver badges16 bronze badges

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

2 Comments

Patrickkx Over a year ago

Thanks, tried it but without destructuring state in callback function in setState :)

Pankaj Upadhyay Over a year ago

fn = (name: keyof State) => () => { this.setState({ [name]: true }); } should work

Collectives™ on Stack Overflow

Typescript React generic function type

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related