pure-list-items-react.jsx

class Todos extends Component {
  constructor() {
    super();
    this.state.todos = [{ name: 'Foo' }, { name: 'Bar' }];
  }
  
  onChange(todo, name) {
    this.setState({
      todos: this.state.todos.map(
        (t, i) => i === todo ? { name } : t
      ),
    });
  }

  render() {
    return (
      <div>
        {this.state.todos.map((todo, i) =>
          <div className="item">
            <input 
              type="text" 
              value={todo.name} 
              onChange={e => this.onChangeTodo(i, e.target.value)}
            />
          </div>
        )}
      </div>
    );
  }
}