How to update React states with one function?

Question

Please see the picture below.

Is there a way to create a single function that will update the states without creating three separate functions. I want the function to use the name of the ref or maybe classname to update the corresponding state with its values.

Answer 1

For example if it's a form component then:

const Form = () => {
  const [form, setForm] = React.useState({});
  const handleChange = e => {
  const {name, value} = e.target;
  setForm(prevState => ({...prevState, [name]: value})); 
  }
  return(
  <form>
     <Input
      name="input1"
      value={form.input1}
      onChange={handleChange}
      />
      <Input
      name="input2"
      value={form.input2}
      onChange={handleChange}
      />
      // etc...
  )
}