Create an axios post with multiple inputs using React Hooks

Question

I am learning how to use React and started using classes and decided to swap over to using Hooks. I believe that I have everything mapped out correctly, however I am very uncertain of how to structure my axios.post with useEffect to handle multiple user inputs.

import React, { useState, useEffect } from 'react'
import axios from 'axios'

const Signup = () => {
    const [customerSignUp, setCustomerSignUp] = useState([
        { email: '', password: '', firstName: '', lastName: ''}
    ]);

    const handleChange = (event) => {
        setCustomerSignUp(event.target.value)
    }

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

    useEffect(() => {
        axios.post('/api/Customer/SignUp', {

        })
        .then(function (response) {
            console.log(response)
        })
        .catch(function (error) {
            console.log(error)
        }) 

    }, [])

I included just the lastName to show how I am using the handleChange event handler to change the state of the customer.

    return (
        <div className="container">
            <form className='white' onSubmit={handleSubmit}>
                <h5 className="grey-text.text-darken-3">Sign Up With Email</h5>                        
                <div className="input-field">
                    <label htmlFor="lastName">Last Name</label>
                    <input type="text" name="lastName" value={customerSignUp.lastName} onChange={handleChange} required />
                </div>
                <div className="input-field"> 
                    <button className="btn blue darken-3" type="submit">Sign Up</button>
                </div>
            </form>
        </div>
    );
}
export default Signup

zachee · Accepted Answer · 2020-08-27 19:07:10Z

7

Your axios request doesn't have to be inside a useEffect(), in fact with your sign-up feature, it probably is best to keep it in your handleSubmit function instead. You have the option to set useEffect() to trigger a single time after first component-render or after every change to a particular dependency. Neither is particular suitable for your feature.

Additionally, it seems like it would make more sense to have your state hold an object, not an array of objects. From there, you can just drop your state into the axios request like this:

import React, { useState, useEffect } from 'react'
import axios from 'axios'

const Signup = () => {
    const [customerSignUp, setCustomerSignUp] = useState(
        { email: '', password: '', firstName: '', lastName: ''}
    );

    const handleChange = (event) => {
        setCustomerSignUp({...customerSignUp, [event.target.name]: event.target.value})
    }

    const handleSubmit = (e) => {
        e.preventDefault()
        axios.post('/api/Customer/SignUp', customerSignUp)
          .then(function (response) {
              console.log(response)
          })
          .catch(function (error) {
              console.log(error)
          })

setCustomerSignUp({ email: '', password: '', firstName: '', lastName: '' }); }

Also remember to give a name attribute to each input that corresponds to a field in the state. (Which looks like you already have)

    return (
        <div className="container">
            <form className='white' onSubmit={handleSubmit}>
                <h5 className="grey-text.text-darken-3">Sign Up With Email</h5>                        
                <div className="input-field">
                    <label htmlFor="lastName">Last Name</label>
                    <input type="text" name="lastName" value={customerSignUp.lastName} onChange={handleChange} required />
                </div>
                <div className="input-field"> 
                    <button className="btn blue darken-3" type="submit">Sign Up</button>
                </div>
            </form>
        </div>
    );
}
export default Signup

edited Aug 27, 2020 at 19:07

zachee

1671 silver badge5 bronze badges

answered Oct 7, 2019 at 22:35

Cat_Enthusiast

15.7k5 gold badges26 silver badges47 bronze badges

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

2 Comments

simplest Over a year ago

quick questions why do you use ... here: setCustomerSignUp({...customerSignup

Cat_Enthusiast Over a year ago

Because anytime you use the setCustomerSignUp function you are setting your entire state to be equal to whatever you pass in. In your original post, you're setting the state to be whatever e.target.value is which is almost always a single string of input, where as the initial state is an object that holds multiple values. That's why I'm spreading in the initial state as well, so we don't lose our object of data. @simplest

Collectives™ on Stack Overflow

Create an axios post with multiple inputs using React Hooks

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related