Posting Form Data with Axios in React JS

In React JS, Axios is a popular HTTP client library that allows you to make AJAX requests to a server. In this tutorial, we will cover how to post form data using Axios in a React JS application.

Step 1: Install Axios
First, you need to install Axios in your React JS project. You can do this by running the following command in your terminal:

npm install axios

Step 2: Create a Form Component
Next, you need to create a form component where users can input their data. In this example, we will create a simple form with two input fields for the user’s name and email address.

import React, { useState } from 'react';

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

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

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      const response = await axios.post('http://example.com/api/formData', formData);
      console.log(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
        placeholder="Enter your name"
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Enter your email"
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default Form;

In the code above, we used the useState hook to initialize the form data state with the user’s name and email. We also created a handleChange function to update the form data state whenever a user types in the input fields. Lastly, we implemented a handleSubmit function that makes a POST request to a server endpoint with the form data when the form is submitted.

Step 3: Import Axios and the Form Component
Next, you need to import Axios and the Form component into your main App component.

import React from 'react';
import axios from 'axios';
import Form from './Form';

const App = () => {
  return (
    <div>
      <h1>Post Form Data using Axios with React JS</h1>
      <Form />
    </div>
  );
};

export default App;

Step 4: Run your Application
Finally, run your React JS application by executing the following command in your terminal:

npm start

Your React JS application should now display a form where users can input their name and email address. When the form is submitted, Axios will make a POST request to the specified server endpoint with the form data.

That’s it! You have successfully implemented posting form data using Axios with React JS. Feel free to customize the form component or the Axios request as needed for your project.