fac18 / nikkin-react-game

See the project here:
https://nikkin-react-game.netlify.com/
0 stars 1 forks source link

form button #31

Open AlexandraOM opened 4 years ago

AlexandraOM commented 4 years ago

I don't know if the form was an issue for you guys, but we noticed it on another team's project too. If you put onSubmit into the form tags with the same code it works like a request too.

<button
          className="find-me-btn"
          onClick={event => {
            event.preventDefault();
            fetchPlayer(username).then(data => props.setUserData(data));
          }}

The above code can also be executed all inside of a separate function (if you want to modularise out a bit more)

const = handleSubmit => event => {
event.preventDefault();
            fetchPlayer(username).then(data => props.setUserData(data));
};

<button onClick={handleSubmit}/>
oliverjam commented 4 years ago

Yeah generally you want to listen for the submit event on the form element

<form
  onSubmit={e => {
    e.preventDefault(); // stops the form doing an actual request and refreshing the page
  }
/>

This is generally a nicer experience because the user can hit enter inside the text input to submit the form. Not everyone explicitly clicks the button.

Also by default button elements inside of forms will submit the form (they default to type="submit"). If you want a non-submit button inside a form (like your "start game" button) you need to explicitly give it type="button".