onSubmit handler executes in jsfiddle, but not in my development environment

Question

My end goal with this code is that I want the data entered into the text field to be logged to the console when the button is pressed, but the onSubmit handler isn't executed in my development environment (by the way, my environment includes a development server set up using create-react-app).

import React, { Component } from 'react'
import './App.css'

class App extends Component {
  constructor() {
      super()
      this.state = {input: undefined}
  }

  render() {
    return (
      <div className="App" marginTop="200px">
        <div className="App-header">
          <h2>Timestamp Microservice</h2>
        </div>
        <p className="App-intro">
          Converts a Unix timestamp (2365145258) to a natural language date (December 16, 2016) and vice versa.
        </p>
        <form>    
          <input type="text" onChange={(event) => this.setState({input: event.target.value})}/> <br/>
          <input type="submit" onSubmit={() => console.log(this.state.input)} />
        </form>
      </div>
    );
  }
}

export default App

However, the code works just fine in jsfiddle.

http://jsfiddle.net/swapnil95/k0jpruyu/2/

Any responses would be much appreciated. Thanks!!

Answer 1

You don't even need the form tag. If you have it the page is going to reload, but you're storing the values in the state with the onChange event on the input. Basically all the button needs to do is output the value to the console.

render() {
return (
  <div className="App">
    <div className="App-header">
      <h2>Timestamp Microservice</h2>
    </div>
    <p className="App-intro">
      Converts a Unix timestamp (2365145258) to a natural language date (December 16, 2016) and vice versa.
    </p>

      <input type="text" onChange={(event) => this.setState({input: event.target.value})}/> <br/>
      <button onClick={() => console.log(this.state.input)}> Submit </button>

  </div>
);

}