React Application keeps submitting while entering input

Question

React Frontend

const InputsSignUp = () => {
  const email = "";
  const password= ""

  const [state, setState] = React.useState({
    email: ""
  })

  function handleChange(evt) {
    evt.preventDefault();

      setState({ firstName: evt.target.value });
    }
    
    return (
        <>
              <Container fluid="sm" style={{backgroundColor: 'white'}}>
      <h1>{email}</h1>
      <h1>{password}</h1>
    <Form>
      <Form.Group className="mb-3" controlId="formBasicUsername">
        <Form.Label>Email address</Form.Label>
        <Form.Control type="text" placeholder="Enter email" value={state.email} onChange={handleChange} />
        <Form.Text className="text-muted">
          We'll never share your email with anyone else.
        </Form.Text>
      </Form.Group>


        <Button variant="primary" type="submit" onSubmit={console.log(state.email)}>
        Submit
      </Button>
      </Form>
      </Container>
        </>
    )
}

export default InputsSignUp;

Here is the code for my Form

Every time I input text into the field it keeps on submitting the request, in this case logging the data on the input

How do I change the code so that it only submits the request when I press the "Submit" button

Answer 1

You're not actually submitting the form. Your implementation of Form.Control is correct. It's only the Button handler that's the problem. This:

<Button variant="primary" type="submit" onSubmit={console.log(state.email)}>

is the same as this:

const result = console.log(state.email);

// ...

<Button variant="primary" type="submit" onSubmit={result}>

which is just elementary JavaScript - and should make the problem quite clear. You're running console.log every time the component renders, and passing undefined as the submit handler.

Pass a function as the submit handler instead, which then runs console.log itself when called.

<Button variant="primary" type="submit" onSubmit={() => console.log(state.email)}>