Basic React form submit refreshes entire page

Question

I\'m trying to create an input form that stores information in a component\'s state variable, then outputs that variable on the screen. I read the docs on controlled compone

Answer 1

Prevent the default behaviour:

afterSubmission(event) {
    event.preventDefault();
    let name = this.state.itemName;
    this.setState ({
        storedItemName:this.state.itemName
    }, function() {
        alert(this.state.storedItemName); // Shows the right value!
    });
}

Answer 2

Just call event.preventDefault method to prevent default behavior of form

afterSubmission(event) {
    event.preventDefault();
    let name = this.state.itemName;
    this.setState ({
        storedItemName:this.state.itemName
    }, function() {
        alert(this.state.storedItemName); // Shows the right value!
    }
}