React+JavaScript: Item appears on console but then disappears

Question

I am trying to console log the two fields from my sign up page. However, the item appears in the console for about a second and then disappears. Any help is appreciated. Please find my code for the sign up below

  export default function SignUp() {
  const [firstName, setFirstName] = React.useState("");
  const [lastName, setLastName] = React.useState("");

  let sign = () => {
    console.log(firstName);
  };

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Avatar className={classes.avatar}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          Sign up
        </Typography>
        <form className={classes.form} noValidate>
          <Grid container spacing={2}>
            <Grid item xs={12} sm={6}>
              <TextField
                autoComplete="fname"
                name="firstName"
                id="firstName"
                label="First Name"
                autoFocus
                onChange={(event) => setFirstName(event.target.value)}
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                id="lastName"
                label="Last Name"
                name="lastName"
                autoComplete="lname"
                onChange={(event) => setLastName(event.target.value)}
              />
            </Grid>
          </Grid>
          <Button
            type="submit"
            className={classes.submit}
            onClick={sign}
          >
            Sign Up
          </Button>

Pedro Filipe · Accepted Answer · 2020-05-26 16:54:18Z

2

The problem is that you are submitting the form without preventing the default (refreshing the page). Make sure you're passing your sign function to the form's onSubmit prop, and then make sure your sign is something along these lines:

let sign = (event) => {
    event.preventDefault();
    console.log(firstName);
};

answered May 26, 2020 at 16:54

Pedro Filipe

1,1151 gold badge11 silver badges17 bronze badges

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

3 Comments

new_hello_world Over a year ago

Thank you, that worked it appears in the console now. Since there are two fields, can you advise how I can make an object out of them or should I make a new ques for that

Emile Bergeron Over a year ago

@new_hello_world to manage a state object.

Pedro Filipe Over a year ago

Please mark the answer as the accepted answer if it answers you question. Check @EmileBergeron comment for creating the object :)

Collectives™ on Stack Overflow

React+JavaScript: Item appears on console but then disappears

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related