score:10

Accepted answer

You need to tell Typescript that your object will have one or more property from IAddPlayerFormState, but not necessarily all properties. You can do it like this:

public onChange(event: { target: { name: any; value: any; }; }) {
  const newState = { [name]: value } as Pick<IAddPlayerFormState, keyof IAddPlayerFormState>;
  this.setState(newState);
  console.log("On Change!");
}

score:0

All u need to do is specify which item you want to update/change

this.setState({value:value});
type ItemState = {
    value?: string;// The state I want to update
};

#In your case would be

this.setState({playerName : new_value});

score:2

Your state shape is this:

interface IAddPlayerFormState {
  playerName: string;
  isDisabled: boolean;
}

and you are calling setState with this:

{any: any}

You can change only values: playerName and isDisabled not any. If you rewrite function signature as

public onChange(event: { target: { name: "playerName"|"isDisabled"; value: any; }; })

or better

public onChange(event: { target: { name: keyof IAddPlayerFormState ; value: any; }; })

it should be ok for typescript. Btw this code will not work though. Change input name :). I hope this answer is clear, if not i will edit that.

score:8

Using this syntax got rid of the error for me:

const myFunction = (e) => {
    return this.setState({...this.state, [e.target.id]: e.target.value});
}


Related Query

More Query from same tag