How to post form data to Axios API with React JS

If you’re developing a web application using React JS and you need to submit form data to an API using Axios, the following steps will guide you through the process.

Step 1: Set up your form

First, create a form using HTML in your React component. Use the <form>, <input>, and <button> tags to create the form fields and submit button.

  
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" />
      <input type="text" name="email" />
      <button type="submit">Submit</button>
    </form>
  

Step 2: Create a function to handle form submission

Create a function in your React component to handle the form submission. This function should prevent the default form submission behavior and make an Axios request to the API to submit the data.

  
    const handleSubmit = (event) => {
      event.preventDefault();
      const formData = new FormData(event.target);
      axios.post('https://api.example.com/submit-form', {
        name: formData.get('name'),
        email: formData.get('email')
      })
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.error(error);
      });
    };
  

Step 3: Import Axios in your component

Before using Axios, you need to import it into your React component. You can either install Axios using npm or yarn and then import it into your component.

  
    import axios from 'axios';
  

Step 4: Submit the form

Now, when you submit the form, the data will be sent to the specified API endpoint using Axios. You can then handle the API response and any errors that occur.

By following these steps, you can easily post form data to an Axios API with React JS. This allows you to submit form data from your React application to a server-side API and handle the response as needed.