Using Dynamic Var with `Set` State in React Hooks?

Question

This is a pretty common pattern in React components:

handleTextFieldChange(event) {     const name = event.currentTarget.name;     this.setState({[name]: event.currentTarget.value}) } 

What Javascript syntax could be used to do the same with React hooks?

i.e. something possibly along the lines of:

handleTextFieldChange(event) {     const name = event.currentTarget.name;     this.set[name](event.currentTarget.value); } 

Answer 1

How about something like this?

function handleTextFieldChange(mySetFunction, event) {     const value = event.currentTarget.value;     mySetFunction(value); }  <TextField     placeholder="Email"     name="passwordResetEmailAddress"     onChange={(e) => handleTextFieldChange(setPasswordResetEmailAddress, e)} >     {passwordResetEmailAddress} </TextField> 

I've tested it and it works.

Answer 2

You could use a single useState with a default value of an object that contains all your input values and update that like you are used to with class components.

Example

const { useState } = React;    function App() {    const [state, setState] = useState({ email: "", password: "" });    function onChange(event) {      const { name, value } = event.target;      setState(prevState => ({ ...prevState, [name]: value }));    }      return (      <div>        <input value={state.email} name="email" onChange={onChange} />        <input value={state.password} name="password" onChange={onChange} />      </div>    );  }    ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>    <div id="root"></div>