Implementando exclusão de tarefas

Vamos criar a função de exclusão de tarefas, sendo assim, crie uma função chamada removeTarefa, esta função irá remover a tarefa de acordo com o índice que for passado para ela. A função deve criar uma nova lista de tarefas filtrando a tarefa a ser excluída, similar ao que foi feiro para verificar se uma tarefa já foi concluída.

Em main/index.js:

const removeTarefa = (index) => {
    const novaListaTarefas = listaTarefas.filter(
      (_, indice) => indice !== index,
    );
    setListaTarefas(novaListaTarefas);
  };

---

Explicação:

• filter: A função filter vai percorrer todas as tarefas criadas. A comparação de indice !== index garante que a tarefa com o índice desejado seja removida, criando uma nova lista sem essa tarefa.
• O _ é o lugar onde o "próprio item" estaria. Usamos _ porque não estamos interessados no conteúdo digitado (queremos só o índice). O _ é apenas uma convenção usada quando você não vai usar aquele parâmetro, mas ele ainda precisa ser declarado.

---

Passar a função de exclusão para o componente Card como prop

Envie a função removeTarefa como uma propriedade (prop) para o componente Card. Assim, o componente Card poderá chamar essa função quando o botão de exclusão for pressionado.

Em main/index.js:

<Card listaTarefas={listaTarefas} excluiTarefa={removeTarefa} />

Adicionando o botão de exclusão no componente Card

Agora, no componente Card, você precisa criar um botão que, quando pressionado, irá chamar a função removeTarefa passando o índice da tarefa.

Em card/index.js:

export default function Card({ listaTarefas, excluiTarefa }) {
  return (
    <FlatList
      style={styles.flatList}
      data={listaTarefas}
      renderItem={({ item, index }) => (
        <View style={styles.tarefaItem}>
          <TouchableOpacity
            style={{ width: "95%", padding: 12 }}
            onPress={() => tarefaConcluida(index)}>
            <Text
              style={[
                styles.tarefaTexto,
                item.estaConcluido && styles.tarefaConcluida,
              ]}>
              {item.estaConcluido ? "✔️  " : "⚪  "} {item.text}
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.excluir}
            onPress={() => excluiTarefa(index)}>
            <Text style={{ padding: 8 }}> ❌ </Text>
          </TouchableOpacity>
        </View>
      )}
      ListEmptyComponent={<EmptyList />}
    />
  );
}

---

Explicação:

• TouchableOpacity onPress={() => removeTarefa(index)}: Quando o botão "❌" é pressionado, a função removeTarefa é chamada com o índice da tarefa a ser excluída.

---