Mastering TypeScript 3 - Third Edition

React state properties

If we attempt to compile our code at this stage, however, we will generate a compile error as follows:

TS2345: Argument of type '{ [x: string]: string; }' is not assignable to parameter of type '{ inputName: string; }

This error highlights the second problem in the onChange function, which is caused by the following line of code:

this.setState({ [valueName]: event.target.value }); 

Here, we are calling the setState function with an object that is using an index property: [valueName]. At runtime, this will equate to [inputName] : event.target.value. While this is valid TypeScript, and we can use this technique to assign the value of a property, remember that a React component uses generic syntax to define both the internal ...