Codher mini todo

App.js

// Live coding results from Codher at Tradeshift
// 2017-04-20
//
// Usage:
//   create-react-app codher
//   cd codher
//   paste this file to src/App.js
//   npm start
//

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

class App extends Component {
  constructor(props) {
    super(props);

    this.onChange = this.onChange.bind(this);
    this.onKeyDown = this.onKeyDown.bind(this);

    this.state = {
      todo: 'Todo item',
      todos: []
    };
  }

  onChange(e) {
    this.setState({
      todo: e.target.value
    });
  }

  onKeyDown(e) {
    if(e.keyCode === 13) {
      e.preventDefault();

      const newTodos = this.state.todos
        .concat([this.state.todo]);

      this.setState({
        todo: '',
        todos: newTodos
      });
    }
  }

  componentWillMount() {
    console.log('will mount', this);
  }

  render() {
    return (
      <form className="App">
        <input
          type="text"
          placeholder="Type a thing"
          onChange={this.onChange}
          onKeyDown={this.onKeyDown}
          value={this.state.todo}
        />
        <ul>
          {this.state.todos.map(todo => {
            return <li>{todo}</li>;
          })}
        </ul>
      </form>
    );
  }
}

export default App;