---

Desafio 01 - Conceitos do React

Essa será uma aplicação onde o seu principal objetivo é uma pequena aplicação de atividades a fazer, para treinar um pouco mais sobre manipulação do estado no React.

• Adicionar uma nova tarefa
• Remover uma tarefa
• Marcar e desmarcar uma tarefa como concluída

Template da plicação

O template está disponível na seguinte URL: github.com/rocketseat-education/ignite-template-reactjs-conceitos-do-react

Solução

components/TaskList.tsx é componente responsável por todas as funcionalidades da aplicação

Adicionar uma nova tarefa: handleCreateNewTask()

function handleCreateNewTask() {
    if(!newTaskTitle) return
    const newTask = {
      id: Math.random(),
      title: newTaskTitle,
      isComplete: false
    }

    setTasks(tasks => [...tasks, newTask])
    setNewTaskTitle('')
  }

Remover uma tarefa: handleRemoveTask(id: number)

function handleRemoveTask(id: number) {
    const filteredTasks = tasks.filter(task => task.id !== id)
    setTasks(filteredTasks)
  }

Marcar e desmarcar uma tarefa como concluída: handleToggleTaskCompletion(id: number)

function handleToggleTaskCompletion(id: number) {
    const task = tasks.map(task => task.id === id ? {
      ...task, 
      isComplete: !task.isComplete
    } : task)
    setTasks(task)
  }

---

Feito com 💜 por Rocketseat