#My axios post request is not working

4 messages · Page 1 of 1 (latest)

buoyant tusk
#

I am trying to create a user by sending the data to backend using axios post request. I have checked the backend and it is working correctly but when i submit a user data nothing happens

Here is the react component to create the user


const baseUrl = 'http://localhost:5000/socialApp/api/users'


const defaultUser = {
    name:'',
    email:'',
    password:''
}

function CreateUser() {

    const [user, setUser] = useState(defaultUser);
  
    const handleInputChange = (e) =>{

        const {name, value} = e.target

        setUser({
  
            [name]:value
        })
    }

    const handleSubmit = (e) =>{
        
        e.preventDefault()
        axios.post(baseUrl,user)
        .then((res) => {
            console.log(res.data)
        })
    }

    return (

        <form >
            <Grid container>
                <Grid item x6={6}>
                    <TextField
                        variant='outlined'
                        label='your name'
                        name='name'
                        value={user.name}
                        onChange={handleInputChange}
                    />
                    <TextField
                        variant='outlined'
                        label='your email'
                        name='email'
                        value={user.email}
                        onChange={handleInputChange}
                    />
                    
                </Grid>
                <Button 
                    variant="contained"
                    onClick={handleSubmit}
                >
                    Submit
                </Button>
            </Grid>
        </form>

        );
    }

export default CreateUser

As soon as I try to type some details the chrome console throws error(attached).
(I have removed one form element as the post was too long)

error.jpg
steady trellis
#

Show the output of console.log of the name and value please

image.png
small ocean
#

setUser(prevValues => ({...prevValues, [name] : value}) )
else it will replace the old values.. with a single key:value pair
ie: ur user will have name OR email.. but not both

buoyant tusk