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. — user2638618
– user2638618, Commented Mar 10, 2019 at 22:53
this will fix your issue : <button onClick={this.handleSubmit}>Submit</button> or <button onClick={ () => this.handleSubmit()}>Submit</button> — ymaghzaz
– ymaghzaz, Commented Mar 10, 2019 at 22:56
@ymaghzaz if you do the second option, you'll want to make sure to pass the event object along — azium
– azium, Commented Mar 10, 2019 at 23:00
@azium yeah you are right , but i thinks that the event object will not be needed for this context. — ymaghzaz
– ymaghzaz, Commented Mar 10, 2019 at 23:05

Nick · Accepted Answer · 2019-03-10 23:14:39Z

3

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>

answered Mar 10, 2019 at 23:14

Nick

1,4421 gold badge15 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

React form triggers button onClick with every input

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related