list class component

list.js

import React from "react";

class ListItem extends React.PureComponent {
  render() {
    return <li>{this.props.children}</li>;
  }
}

class List extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { todos: [], name: "" };
    this.addTodo = this.addTodo.bind(this);
    this.updateName = this.updateName.bind(this);
  }

  addTodo() {
    this.setState({
      todos: [...this.state.todos, this.state.name],
      name: ""
    });
  }

  updateName(e) {
    this.setState({
      name: e.target.value
    });
  }

  render() {
    return (
      <div>
        <input onChange={this.updateName} value={this.state.name} />
        <button onClick={this.addTodo}>add todo</button>
        <ul>
          {this.state.todos.map(t => <ListItem key={t}>{t}</ListItem>)}
        </ul>
      </div>
    );
  }
}

export default List;