todo list exercise

[zamarrowski]

import React from 'react'
import InputText from './InputText'
import List from './List'
import Button from './../clase1_2/Button'

class ListContainer extends React.Component {

  state = {
    todos: [{ id: 1, title: 'Ir a por el pan' }],
    newTodoText: ''
  }

  handleInputChange = e => {
    this.setState({ newTodoText: e.target.value })
  }

  onAddTodo = () => {
    this.setState(state => ({
      todos: [...state.todos, { id: Math.random(), title: state.newTodoText }],
      newTodoText: '',
    }))
  }

  onDeleteTask = (id) => {
    this.setState({ todos: this.state.todos.filter(todo => todo.id !== id) })
  }

  onEditTodo = (e, id) => {
    const value = e.target.value
    const todosEdited = this.state.todos.map(todo => {
      if (todo.id === id) todo.title = value
      return todo
    })
    this.setState({ todos: todosEdited })
  }

  render() {
    return (
      <>
        <List
          todos={this.state.todos}
          onDeleteTodo={this.onDeleteTask}
          onEditTodo={this.onEditTodo}
        />
        <InputText value={this.state.newTodoText} onChange={this.handleInputChange} />
        <Button onPress={this.onAddTodo}>Add todo</Button>
      </>
    )
  }

}

export default ListContainer

```js
const List = props => <ul>
  {props.todos.map(todo =>
    <li key={todo.id}>
      <input type="text" onChange={e => props.onEditTodo(e, todo.id)} value={todo.title} />
      <button onClick={() => props.onDeleteTodo(todo.id)}>Borrar</button>
    </li>
  )}
</ul>

export default List

const Button = (props) => <button onClick={props.onPress}>{props.children}</button>

export default Button

const InputText = props => <input type="text" value={props.value} onChange={props.onChange} />

export default InputText