Como foi dito no video, somente ao clicar fora do input, é filtrado o que é pesquisado, como resolver isto?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Como foi dito no video, somente ao clicar fora do input, é filtrado o que é pesquisado, como resolver isto?
Olá, Ryan! Tudo bem?
O que você está buscando é que a pesquisa seja realizada enquanto o usuário está digitando, ao invés de esperar que ele clique fora do input, certo?
Para isso, você pode usar o evento onChange no elemento do input. Esse evento é acionado sempre que o valor do input muda. Assim, você pode chamar uma função que realiza a pesquisa sempre que o usuário digita algo.
Veja um exemplo:
function Pesquisa() {
const [livrosPesquisados, setLivrosPesquisados] = useState([])
const [livros, setLivros] = useState([])
useEffect(() => {
fetchLivros()
}, [])
async function fetchLivros() {
const livrosDaAPI = await getLivros()
setLivros(livrosDaAPI)
}
const handleSearch = async (event) => {
const searchTerm = event.target.value;
const filteredBooks = await getLivros(searchTerm);
setLivrosPesquisados(filteredBooks);
}
return (
<div>
<input type="text" onChange={handleSearch} />
{/* Restante do código */}
</div>
)
}
Nesse exemplo, a função handleSearch é chamada sempre que o usuário digita algo no campo de pesquisa. A função pega o valor atual do campo (que é o termo de pesquisa) e realiza a pesquisa com base nesse valor. Em seguida, ela atualiza o estado livrosPesquisados com os livros filtrados.
Lembre-se de ajustar a função getLivros para aceitar um parâmetro de termo de pesquisa e filtrar os livros com base nesse termo.
Espero ter ajudado e bons estudos!