React form triggers button onClick with every input

Question

I am trying to create a form which has two inputs and a button. When you click the button, the input fields are used to update the state and then show an alert with the information saved in the state. Currently, I have the inputs changing the state but its calling the alert function every time a letter is added to the input...

handleSubmit= (e) =>{
    alert(JSON.stringify(this.state, null, '  '));
  }

  render() {
    return (
      <div className="App">

            <label>
              Username:
              <input
              type="text"
              name="username"
              placeholder="username"
              value={this.state.username}
              onChange={e => this.setState({ username: e.target.value })}
            />
            </label>
            <label>
              Password:
              <input
              type="text"
              name="password"
              placeholder="password"
              value={this.state.password}
              onChange={e => this.setState({ password: e.target.value })}
            />
            </label>

            <button onClick={this.handleSubmit()}>Submit</button>
            <p>{this.state.token}</p>
          <WelcomeStory></WelcomeStory>
      </div>
    );
  };

Thank you, this is my first front end framework so it has been a big learning curve.

Remove parentheses from this.handleSubmit() so it's not called right away. — , Mar 10 '19 at 22:53
@ymaghzaz if you do the second option, you'll want to make sure to pass the event object along — azium, Mar 10 '19 at 23:00
@azium yeah you are right , but i thinks that the event object will not be needed for this context. — ymaghzaz, Mar 10 '19 at 23:05

score 3 · Accepted Answer · answered Mar 10 '19 at 23:14

You do not want the function being called right away, but rather only when the button is clicked. onClick is an event listener waiting for the button to be clicked before calling this.handleSubmit. By having parenthesis, it will call the handleSubmit function as soon as the component is rendered. There are similar questions on SO where people go into it at greater detail if you would like to understand when you should use parenthesis and when you shouldn't: here and here.

<button onClick={this.handleSubmit}>Submit</button>

React form triggers button onClick with every input

1 Answers1