How do I implement form data binding in React?

How do I implement form data binding in React?

To implement form data binding in React, you can use controlled components. This means that the form data is handled by the state of the component.

Can you show me a simple example?

Sure! Here's a basic example:

import React, { useState } from 'react';

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

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('A name was submitted: ' + inputValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={inputValue} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

This code creates a simple form that binds the input value to the component's state.

What if I have multiple input fields?

You can manage multiple input fields by using an object in the state to hold the values. Here's an example:

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

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

This way, you can easily manage multiple fields.