How to dynamically set state with onChange event handler in a functional component

Question

Back in the days of using class based components, we were able to set the state of input elements dynamically with name attribute as described below. I was wondering if there is any way to set the state of inputs dynamically using useState hook

onChange = (event) => {
  const { target: { name, value } } = event
  this.setState({ [name]: value })
}

Answer 1

You can use useState to accomplish the same

function App() {
  const [state, setState] = React.useState({});

  const onChange = event => {
    const {
      target: { name, value }
    } = event;
    setState({ [name]: value });
  };

  ... your input...
}

But be aware that useState's updator (setState in this case) doesn't merge existing props as this.setState does.

class App extends Component {
  state = {age: 10};
  onChange = e => {
    ... get name and value..

    // Here, `age` is not overwritten and stays as `10` after this.setState
    this.setState({[name]: value})
  }
}

function App() {
  const [state, setState] = React.useState({age: 10});

  const onChange = event => {
    ... get name & value

    // If you do this, `age` becomes undefined.
    setState({ [name]: value });

    // you have to spread the existing state first
    setState({...state, [name]: value });
  };
}

As per your comment, if you have multiple dynamic number of inputs, it makes sense to use {[name]: value} but, if you have a set number of inputs, you can declare one useState per state.

function App() {
  const [password, setPassword] = useState("");
  const [name, setName] = useState("");

  const updatePassword = e => setPassword(e.target.value);
  const updateName = e => setName(e.target.value);

  return (
    <form>
      <input type="text" value={password} onClick={updatePassword} />
      <input type="text" value={name} onClick={updateName} />
    </form>
  );
}