How do I make a POST request using axios in react?

Question

I am having issues with the axios post request. When I click on the Button, nothing happens. What is supposed to happen is that the data that I enter into the input fields is submitted to the API. However, no redirect or anything happens when I click the Button. I am not sure whether the onClick function in the Button is never being triggered or whether the issue lies with the call of axios and then the useNavigate function. I have tried several different ways of using these function but none worked. It might be a syntactic issue as I am a beginner with react. Any help would be appreciated!

Full Code:

import axios from 'axios';
import React, { useState } from 'react';
import { Container, Button } from 'react-bootstrap';
import { useNavigate } from 'react-router-dom';

const AddContact = () => {

    const [first_name, setFirstName] = useState("")
    const [last_name, setLastName] = useState("")
    const [mobile_number, setMobileNumber] = useState("")
    const [home_number, setHomeNumber] = useState("")
    const [work_number, setWorkNumber] = useState("")
    const [email_address, setEmailAddress] = useState("")

    const history = useNavigate();
    const AddContactInfo = async () => {
        let formField = new FormData();
        formField.append('first_name', first_name)
        formField.append('last_name', last_name)
        formField.append('mobile_number', mobile_number)
        formField.append('home_number', home_number)
        formField.append('work_number', work_number)
        formField.append('email_address', email_address)

        await axios.post('http://localhost:8000/api/', {
            data: formField
        }).then(function (response) {
            console.log(response.data);
            history('/', { replace: true });
        })
    }

    return (
        <div>
            <h1>Add contact</h1>
            <Container>

                <div className="form-group">
                    <input type="text"
                        className="form-control form-control-lg"
                        placeholder="Enter Your First Name"
                        first_name="first_name"
                        value={first_name}
                        onChange={(e) => setFirstName(e.target.value)} />
                </div>


                <div className="form-group">
                    <input type="text"
                        className="form-control form-control-lg"
                        placeholder="Enter Your Last Name"
                        last_name="last_name"
                        value={last_name}
                        onChange={(e) => setLastName(e.target.value)} />
                </div>

                <div className="form-group">
                    <input type="text"
                        className="form-control form-control-lg"
                        placeholder="Enter Your Mobile Number"
                        mobile_number="mobile_number"
                        value={mobile_number}
                        onChange={(e) => setMobileNumber(e.target.value)} /></div>

                <div className="form-group">
                    <input type="text"
                        className="form-control form-control-lg"
                        placeholder="Enter Your Home Number"
                        home_number="home_number"
                        value={home_number}
                        onChange={(e) => setHomeNumber(e.target.value)} /></div>

                <div className="form-group">
                    <input type="text"
                        className="form-control form-control-lg"
                        placeholder="Enter Your Work Number"
                        work_number="work_number"
                        value={work_number}
                        onChange={(e) => setWorkNumber(e.target.value)} /></div>


                <div className="form-group">
                    <input type="text"
                        className="form-control form-control-lg"
                        placeholder="Enter Your Email Address"
                        email_address="email_address"
                        value={email_address}
                        onChange={(e) => setEmailAddress(e.target.value)} /></div>


                <Button onClick={() => { AddContactInfo(); }}>
                    Add Contact
                </Button>

            </Container>

        </div >
    );

};

export default AddContact;

Any erros in the console? What does console.log print inside success? — joy08
– joy08, Commented Nov 14, 2021 at 7:15

Dharman · Accepted Answer · 2021-11-14 07:43:12Z

2

First rename AddContactInfo to addContactInfo and then:

<Button onClick={addContactInfo}>
   Add Contact
</Button>

You should correct the method addContactInfo as below:

const AddContactInfo = () => {
        let formField = new FormData();
        formField.append('first_name', first_name)
        formField.append('last_name', last_name)
        formField.append('mobile_number', mobile_number)
        formField.append('home_number', home_number)
        formField.append('work_number', work_number)
        formField.append('email_address', email_address)

         axios.post('http://localhost:8000/api/', {
            data: formField
        }).then(function (response) {
            console.log(response.data);
            history('/', { replace: true });
        })
    }

edited Nov 14, 2021 at 7:43

Dharman♦

34k27 gold badges106 silver badges157 bronze badges

answered Nov 14, 2021 at 7:38

Saeed Hemmati

5053 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohammad Asghari · Accepted Answer · 2021-11-14 08:50:12Z

1

Try This:

<Button onClick={AddContactInfo}>
  Add Contact
</Button>

    

import axios from 'axios';                
    const url = 'http://localhost:8000/api/';
            
            axios.post(url , formField)
                .then(response => {

                     console.log(response.data);
             history('/', { replace: true });

                })
                .catch(({response}) => {
                    console.log(response);
                });

edited Nov 14, 2021 at 8:50

answered Nov 14, 2021 at 7:19

Mohammad Asghari

4264 silver badges8 bronze badges

Comments

awedis · Accepted Answer · 2021-11-14 07:22:25Z

1

Try calling the function this way :)

<Button onClick={AddContactInfo}>
  Add Contact
</Button>

answered Nov 14, 2021 at 7:22

awedis

362 bronze badges

Collectives™ on Stack Overflow

How do I make a POST request using axios in react?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related