TodoList.js

const List = props => (
  <ul>
    {
      props.items.map( (item, index) => <li key={index}>{item}</li> )
    }  
  </ul>
)
class TodoList extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      term: ''
    }
    
    this.handleChange = this.handleChange.bind(this);
  }
  
  handleChange = (e) => {
    this.setState({
      term: e.target.value
    });
  }
  
  handleSubmit = (e) => {
    e.preventDefault();
    this.setState({
      term: '',
      items: [...this.state.items, this.state.term]
    });
  }
  
  render() {
    const buttonStyle = {
      height: 19,
      marginLeft: 5,
      borderRadius: 10
    }
    return (
      <div>
        <h4>Todo List</h4>
        <form onSubmit={this.handleSubmit}>
          <input 
          type='text' 
          value={this.state.term}
          onChange={this.handleChange} 
          placeholder="Enter Todo" />
          <button type='submit' style={buttonStyle}>Add</button>

        </form>
        <List items={this.state.items} />
      </div>
    );
  }
  
}

ReactDOM.render(<TodoList />, document.querySelector('#root'));

// HTML
// <div id='root'></div>