How do I manage form state in React?

How do I manage form state in React?

In React, you can manage form state using controlled components, where form elements' values are controlled by React state.

Can you show me an example of a controlled component?

Sure! Here's a simple example:

import React, { useState } from 'react';

function MyForm() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <form>
      <input type="text" value={inputValue} onChange={handleChange} />
    </form>
  );
}

What if I have multiple inputs?

You can manage multiple inputs by using an object in your state to hold values for each input. Here's an example:

const [formData, setFormData] = useState({ name: '', email: '' });

const handleChange = (event) => {
  const { name, value } = event.target;
  setFormData({ ...formData, [name]: value });
};