How do I handle form inputs in React?

How do I handle form inputs in React?

In React, you can handle form inputs using controlled components. This means that the form data is handled by the state of the component.

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} />
      <button type="submit">Submit</button>
    </form>
  );
}

What if I want to handle multiple inputs?

You can manage multiple inputs by using an object in your state. Here's an example:

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

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

<input type="text" name="name" value={formData.name} onChange={handleChange} />
<input type="email" name="email" value={formData.email} onChange={handleChange} />