score:5

Accepted answer

The default behavior of a form with input of type submit is to post back to the server.

<input> elements of type "submit" are rendered as buttons. When the click event occurs (typically because the user clicked the button), the user agent attempts to submit the form to the server.

You can pass the event object of the submit handler and use the event.preventDefault method to prevent the form from posting back:

onSubmitForm(e) {
      e.preventDefault();
      this.props.signUp(this.state);
      this.setState({
        name: "",
        email: ""
      });
    }

Here is a running snippet of your code:

class App extends React.Component {
    constructor(props) {
      super(props);
  
      console.log("App constructor");
  
      this.state = {
        signedUpPeople: []
      };
  
      this.signUp = this.signUp.bind(this);
    }
  
    signUp(person) {
      this.setState({
        signedUpPeople: this.state.signedUpPeople.concat(person)
      });
    }
  
    render() {
      return (
        <div>
          <SignUpForm signUp={this.signUp} />
          <SignedUpList list={this.state.signedUpPeople} />
        </div>
      );
    }
  }
  
  class SignUpForm extends React.Component {
    constructor(props) {
      super(props);
  
      console.log("SignUpForm constructor");
  
      this.state = {
        name: "",
        email: ""
      };
  
      this.changeValue = this.changeValue.bind(this);
      this.onSubmitForm = this.onSubmitForm.bind(this);
    }
  
    changeValue(event) {
      const value = event.target.value;
      const name = event.target.name;
  
      this.setState({
        name: value
      });
    }
  
    onSubmitForm(e) {
      e.preventDefault();
      this.props.signUp(this.state);
      this.setState({
        name: "",
        email: ""
      });
    }
  
    render() {
      //console.log('SignUpForm render');
      return (
        <div>
          <h2>Sign up</h2>
          <form onSubmit={this.onSubmitForm}>
            <label htmlFor="name">Name:</label>
            <input id="name" name="name" onChange={this.changeValue} />
            <br />
            <label htmlFor="email">E-mail:</label>
            <input id="email" name="name" onChange={this.changeValue} />
            <input type="submit" value="Sign up" />
          </form>
        </div>
      );
    }
  }
  
  class SignedUpList extends React.Component {
    render() {
      //console.log('SignedUpList render');
      return (
        <div>
          <h2>Already signed up</h2>
          <ul>
            {this.props.list.map(({ name, email }, index) => (
              <li key={index}>
                {name}, {email}
              </li>
            ))}
          </ul>
        </div>
      );
    }
  }
  
  ReactDOM.render(<App />, window.document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app">

</div>

score:0

Thank you all for your help! :-)

e.preventDefault();

Did fix the problem. Thanks!

score:1

onSubmitForm(e) {
    e.preventDefault(); // prevent the form from refreshing the page 

    this.props.signUp(this.state);
    this.setState({
      name: "",
      email: ""
    });
}

It is working with your codepen link :)

Have a deep look at this :

React - Preventing Form Submission

or

https://medium.com/@ericclemmons/react-event-preventdefault-78c28c950e46


Related Query

More Query from same tag