Basic React Component for a ToDo List

ToDo.js

import React, {Component} from 'react';

const List = props => (
  <ul>
    {
      props.itmes.map((item, index) => <li key={index}>{item}</li>)
    }
  </ul>
);

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      items: []
    };
    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
 }
  
   onChange(e) {
    this.setState({
       input: e.target.value
   });
   
   onSubmit(e) {
     e.preventDefault();
     this.setState({
        input: '',
        items: [...this.state.items, this.state.input]
     });
    }
   
   render() {
     return(
       <div>
        <form className="App" onSubmit={this.onSubmit}>
          <input value={this.state.input} onChange={this.onChange} />
          <button>Submit</button>
        </form>
        <List items={this.state.items} />
       </div>
        );
     }
 }