TODO tasks

[zamarrowski]

ListContainer.js

import React from 'react'
import List from './List'
import InputText from './InputText'
import AddTaskButton from './AddTaskButton'

class ListContainer extends React.Component {

  state = {
    tasks: [{
      id: 10001,
      title: 'Comprar el pan'
    }, {
      id: 10002,
      title: 'Sacar a India'
    }],
    newTaskText: ''
  }

  handleNewTaskText = e => {
    this.setState({ newTaskText: e.target.value })
  }

  addTask = () => {
    this.setState({
      tasks: [...this.state.tasks, { id: Math.random(), title: this.state.newTaskText }],
      newTaskText: '',
    })
  }

  removeTask = taskId => {
    let newTasks = this.state.tasks.filter(task => task.id !== taskId)
    this.setState({ tasks: newTasks })
  }

  render() {
    return (
      <>
        <List tasks={this.state.tasks} onRemove={this.removeTask} />
        <InputText onChange={this.handleNewTaskText} value={this.state.newTaskText} />
        <AddTaskButton onAdd={this.addTask} />
      </>
    )
  }

}

export default ListContainer

List.js

import React from 'react'
import ListItem from './ListItem'

export default props =>
  <ul>
    {props.tasks.map(task => (
      <ListItem key={task.id} title={task.title} onRemove={() => props.onRemove(task.id)} />
    ))}
  </ul>

ListItem.js

import React from 'react'
import RemoveTaskButton from './RemoveTaskButton'

export default props =>
  <>
    <li>
      <p contentEditable={true}>{props.title}</p>
    </li>
    <RemoveTaskButton onRemove={props.onRemove} />
  </>

InputText.js

import React from 'react'

export default props => <input type="text" value={props.value} onChange={props.onChange} />

AddTaskButton.js

import React from 'react'

export default props => <button onClick={props.onAdd}>Add task</button>