How to Get Form Data on Submit in React

React is a popular JavaScript library used for building user interfaces. When it comes to handling forms in React, one common requirement is to retrieve the form data when the user submits it. In this article, we will explore different approaches to achieve this in a React application.

1. Using State and Event Handlers

One way to retrieve form data in React is by using state and event handlers. Here’s a step-by-step guide:

1. First, create a react component.
2. Define the initial state to hold the form data. You can use the useState hook to create state variables for each input field in the form.

const [formData, setFormData] = useState({
  name: "",
  email: "",
  // Add more fields as needed
});

1. Create event handlers to update the state when the user interacts with the form fields. For example, you can use the onChange event to capture the input changes and update the respective state variables.

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

1. In the form element, add the event handlers to the input fields using the onChange prop. Make sure to set the name attribute for each input field, which corresponds to the state variable name.

<form>
  <input
    type="text"
    name="name"
    value={formData.name}
    onChange={handleInputChange}
  /><input
    type="email"
    name="email"
    value={formData.email}
    onChange={handleInputChange}
  />
  {/* Add more fields as needed */}
  <button type="submit">Submit</button>
</form>

1. Finally, handle the form submission by adding an onSubmit event handler to the form element. In the event handler, you can access the form data from the state variables and perform any necessary actions, such as sending the data to a server or updating the UI.

const handleSubmit = (event) => {
  event.preventDefault();
  // Access form data from formData state variables
  console.log(formData);
  // Perform further actions (e.g., API calls, state updates)
};

<form onSubmit={handleSubmit}>
  {/* Input fields */}
  {/* Submit button */}
</form>

Now, when the user submits the form, the form data will be available in the handleSubmit function, and you can process it as needed.

2. Using Refs

Another approach to retrieving form data in React is by using refs. Refs provide a way to access and interact with DOM elements directly. Here’s how you can implement it:

1. Create a ref for each input field in the form. You can use the useRef hook to create the refs.

const nameRef = useRef();
const emailRef = useRef();
// Add more refs as needed

1. Assign the refs to the corresponding input fields using the ref prop.

<input type="text" ref={nameRef} />
<input type="email" ref={emailRef} />
{/* Add more input fields as needed */}

1. Handle the form submission by adding an onSubmit event handler to the form element. In the event handler, you can access the form data by referencing the input fields using the refs.

const handleSubmit = (event) => {
  event.preventDefault();
  const name = nameRef.current.value;
  const email = emailRef.current.value;
  // Access more form fields using refs
  console.log(name, email);
  // Perform further actions (e.g., API calls, state updates)
};

<form onSubmit={handleSubmit}>
  {/* Input fields */}
  {/* Submit button */}
</form>

By referencing the input fields, you can retrieve their values directly in the form submission event handler.