Syntax? error causes React app to reset after change handler

Question

I know something is wrong here but I can't see it. In the code below, the event handler for the input box is working correctly, but something is wrong with the code for the save. When I click the button, I can see the event handler firing and then the whole app resets. Any ideas?

import React, { Component } from 'react';
import InputForm from './InputForm';
class Parent extends Component {
  constructor(props){
    super(props);
    this.state = {
      value: ""
    };
  }
  inputSavedHandler = (event) => {
    console.log("input saved-------------------");
  }
  inputChangedHandler = (event) => {
    this.setState({value: event.target.value});
  }
  render(){
    return(
      <div>
          <InputForm
            value={this.state.value}
            changed={this.inputChangedHandler}
            saved={this.inputSavedHandler}
          />
      </div>
    );
  }
}
export default Parent;

import React, { Component } from 'react';
class InputForm extends Component {
  render(){
    return(
      <div>
          <form onSubmit={this.props.saved}>
            <input type="text" className="input" value={this.props.value} onChange={this.props.changed} />
            <input type="submit" value="Add" />
          </form>
      </div>
    );
  }
}
export default InputForm;

this is default behavior for `form`, use `event.preventDefault()` inside `inputSavedHandler` method. — Mayank Shukla, Feb 20 '18 at 13:30

score 1 · Accepted Answer · answered Feb 20 '18 at 13:30

1

You need to prevent the form from submitting using event.preventDefault in inputSavedHandler

answered Feb 20 '18 at 13:30

TryingToImprove

7,047
4
30
39

Thank you! My mistake for not realizing that the form "submission" was causing the behavior. – P.H. Feb 20 '18 at 13:55

Syntax? error causes React app to reset after change handler

1 Answers1