Get Form Data in React

Get form data in React

When working with forms in React, you may need to retrieve the data entered by the user for further processing. In this blog post, we will explore different methods to get form data in React.

Method 1: Using Controlled Components

One way to get form data in React is by using controlled components. Controlled components are input elements whose value is controlled by React state. To retrieve the form data, you can simply access the state value.

Here’s an example:

{`
import React, { useState } from 'react';

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

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

  return (
    

      
      
      Submit
    
  );
}

export default Form;
`}

In this example, we have a form with two input fields: name and email. The value of each input field is controlled by the formData state. The handleChange function updates the formData state whenever the user types in the input fields. The handleSubmit function logs the form data when the form is submitted.

Method 2: Using Refs

Another way to get form data in React is by using refs. Refs provide a way to access DOM elements directly. You can use refs to get the values of the form inputs.

Here’s an example:

{`
import React, { useRef } from 'react';

function Form() {
  const nameRef = useRef();
  const emailRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = {
      name: nameRef.current.value,
      email: emailRef.current.value,
    };
    console.log(formData);
  };

  return (
    

      
      
      Submit
    
  );
}

export default Form;
`}

In this example, we create two refs: nameRef and emailRef. The ref objects are assigned to the respective input elements. When the form is submitted, we can access the input values using the ref’s current property.

These are two common methods to get form data in React. You can choose the method that suits your project requirements. Happy coding!

Final Output:

<

pre>{`

{`
import React, { useState } from 'react';

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

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

  return (
    

      
      
      Submit
    
  );
}

export default Form;
`}