ANÚNCIO

~/questoes/programacao

Como a funcionalidade de busca por palavra-chave é implementada em uma To Do List?

Responda, confira o feedback e use o resultado para orientar sua revisão.
Aula de referência PROJETO de React JS para INICIANTES – Faça uma To Do List do zero!
Para fixar

Implementando Busca por Palavra-chave em uma To Do List com React

Conceito central

A busca por palavra-chave em uma To Do List utiliza o método filter() do JavaScript para verificar se o texto de cada tarefa contém a palavra digitada pelo usuário. Esse é um dos array methods mais práticos para filtrar dados em React, permitindo criar uma funcionalidade de pesquisa eficiente e responsiva.

Por que essa resposta faz sentido

O filter() percorre cada tarefa na lista e retorna apenas aquelas que contêm a palavra-chave buscada. Esse método é perfeito para busca porque cria um novo array com os resultados, sem modificar o estado original, mantendo a aplicação previsível e eficiente.

Armadilhas comuns

  • Confundir filter() com map() achando que ambos servem para localizar elementos (na verdade, filter seleciona e map transforma).
  • Tentar implementar busca apenas com useState, esquecendo de usar filter() para realmente filtrar os dados.
  • Fazer a busca sensível a maiúsculas e minúsculas, retornando 'Estudar JavaScript' como diferente de 'estudar javascript' (use toLowerCase() para evitar isso).

Entenda as alternativas

A

O filter() é o método ideal para busca. Ele testa cada tarefa com uma condição (por exemplo, se o título inclui a palavra digitada) e retorna um novo array apenas com as tarefas que passam no teste. Simples, direto e perfeito para pesquisa em listas.

B

O map() transforma elementos de um array em outros elementos, não filtra. Ele seria usado para converter uma lista de tarefas em uma lista de títulos, por exemplo, mas não localiza tarefas por palavra-chave. A busca exige seleção, não transformação.

C

useState armazena dados no estado da aplicação, mas não é responsável por implementar a lógica de busca. Você usa useState para guardar o texto que o usuário digita no campo de pesquisa, mas quem realmente busca as tarefas é o filter().

D

useEffect sincroniza efeitos colaterais como requisições ao servidor, mas uma busca local por palavra-chave não precisa disso. A busca acontece instantaneamente no navegador, filtrando o array existente, sem necessidade de comunicação com banco de dados.

Dica prática: Para implementar busca em sua To Do List, crie um estado para guardar o texto digitado, depois use filter() com includes() ou algum método de comparação de strings. Exemplo: tarefas.filter(tarefa => tarefa.titulo.toLowerCase().includes(busca.toLowerCase())). Assim a busca funciona em tempo real conforme o usuário digita.

Revise pensando: Se você quiser buscar todas as tarefas que contenham a palavra 'React', qual método usaria para percorrer o array e retornar apenas as que fazem match?