todo list in react

1class TodoApp extends React.Component {
2  constructor(props) {
3    super(props);
4    this.state = { items: [], text: '' };
5    this.handleChange = this.handleChange.bind(this);
6    this.handleSubmit = this.handleSubmit.bind(this);
7  }
8
9  render() {
10    return (
11      <div>
12        <h3>TODO</h3>
13        <TodoList items={this.state.items} />
14        <form onSubmit={this.handleSubmit}>
15          <label htmlFor="new-todo">
16            What needs to be done?
17          </label>
18          <input
19            id="new-todo"
20            onChange={this.handleChange}
21            value={this.state.text}
22          />
23          <button>
24            Add #{this.state.items.length + 1}
25          </button>
26        </form>
27      </div>
28    );
29  }
30
31  handleChange(e) {
32    this.setState({ text: e.target.value });
33  }
34
35  handleSubmit(e) {
36    e.preventDefault();
37    if (this.state.text.length === 0) {
38      return;
39    }
40    const newItem = {
41      text: this.state.text,
42      id: Date.now()
43    };
44    this.setState(state => ({
45      items: state.items.concat(newItem),
46      text: ''
47    }));
48  }
49}
50
51class TodoList extends React.Component {
52  render() {
53    return (
54      <ul>
55        {this.props.items.map(item => (
56          <li key={item.id}>{item.text}</li>
57        ))}
58      </ul>
59    );
60  }
61}
62
63ReactDOM.render(
64  <TodoApp />,
65  document.getElementById('todos-example')
66);
67