The React Application does not work as intended when submitting a form

Question

I created a register page for my web Application using React. Here is my Code for Register Component -

import React, { useState } from 'react';
import { Avatar,  Button, Paper, Grid, Typography, Container } from '@material-ui/core';
import axios from "axios";
import useStyles from './styles';
import Input from './Input';


const initialState = { name: '', email: '', password: '', mobile: '', confirmPassword: '' };

const Register = () => {
  const [form, setForm] = useState(initialState);
  const classes = useStyles();
  const handleSubmit = async () => {
      const { data } = await axios.post('http://localhost:4000/users/register', initialState);
      console.log(data); 
  };
  const handleChange = (e) => setForm({ ...form, [e.target.name]: e.target.value });
  return (
    <div>
      <Container component="main" maxWidth="xs">
        <Paper className={classes.paper} elevation={3}>
          <Typography component="h1" variant="h5">Sign up</Typography>
          <form className={classes.form} onSubmit={handleSubmit}>
            <Grid container spacing={2}>
                <Input name="name" label="Full Name" handleChange={handleChange} autoFocus/>
                <Input name="mobile" label="Mobile Number" handleChange={handleChange}/>
                <Input name="email" label="Email Address" handleChange={handleChange} type="email"/>
                <Input name="password" label="Password" handleChange={handleChange} type='password'/>
                <Input name="confirmPassword" label="Confirm Password" handleChange={handleChange} type="password"/>
            </Grid>
            <Button type="submit" fullWidth variant="contained" color="primary" className={classes.submit}>
              Sign Up
            </Button>
          </form>
        </Paper>
      </Container>
    </div>
  );
};
export default Register;

When a form is submitted, no request is made on the server side. Instead, it redirects to the same page again with query parameters equal to the input bodies of the form. What am I doing wrong here?

@RichardHpa client is running on port 3000, ans server on 4000. — rahul
– rahul, Commented Jun 8, 2021 at 3:43
@djolf request is sent on the server side, but the page re-rendered on form submsission — rahul
– rahul, Commented Jun 8, 2021 at 3:47

Richard Hpa · Accepted Answer · 2021-06-08 03:43:57Z

1

You aren't preventing the default action of the form. Since you are using a standard html form, submitting it will just default to a get request which would include the values in the url like you have said.

Preventing the default will allow you to then do a non default action like the axios call you want.

  const handleSubmit = async (e) => {
      e.preventDefault()
      const { data } = await axios.post('http://localhost:4000/users/register', initialState);
      console.log(data); 
  };

answered Jun 8, 2021 at 3:43

Richard Hpa

2,90717 silver badges27 bronze badges

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

Comments

Ayush Bhatt · Accepted Answer · 2021-06-08 03:48:59Z

0

Use event.preventDefault() in handelSubmit as it will stop the default action of the browser which is reloading on submititing a a form.

const handleSubmit = async (event) => {
      event.preventDefault();
      // other line of code
};

answered Jun 8, 2021 at 3:48

Ayush Bhatt

391 silver badge2 bronze badges

1 Comment

Richard Hpa Over a year ago

This is the same as my answer I have already posted. Double check to make sure the same answer hasn't already been given. Other people might down vote your answer.

Collectives™ on Stack Overflow

The React Application does not work as intended when submitting a form

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related