How to generalize a method?

Question

JavaScript

There are many fields that, when changed, write to the state - and each field has its own handler.
How to make one method take a parameter and understand where to write to the state?

handleChangeKpp = (kpp: string) => {
        this.setState({kpp});
    };

Here is the method that needs to be universalized, for example, it takes a parameter "name" and does setSatate({name}),
takes "position" and does setSatate({name})

Answer 1

handleChange = e => {
    this.setState({ [e.target.name]: e.target.value })
  }

....

 <input type="text" name="text1" onChange={this.handleChange} />
 <input type="text" name="text2" onChange={this.handleChange} />
 <input type="text" name="text3" onChange={this.handleChange} />

Answer 2

Here is the method that needs to be universalized, for example, it takes a parameter "name" and does setSatate({name}),
takes "position" and does setSatate({name})

This will not work, you will have to explicitly pass the name of the parameter to the function.

setParam = (name: string, value: any) => {
   this.setState({ ...this.state, [name]: value });
}
...
setParam("position", ...);

ps In your code, setState is passed a new object with no previous state, is that how it should be? In my example I added...this.state

Answer 3

Try final-form. Great library for those with lots of fields.
Everything you need is inside. Google the report about final-form in YouTube, on holy.js was.