Oi, João, tudo bem?
Esse problema acontece, pois ao buscar não efetuar nenhuma busca, o resultado será todos os livros que estão na API. Para solucionar o problema, podemos usar o seguinte código dentro da tag <Input>
no componente "Pesquisar":
onBlur = {evento => {
const textoDigitado = evento.target.value
if (textoDigitado !== "") { // Verificando se o campo não está vazio
const resultadoPesquisa = livros.filter(livro => livro.nome.includes(textoDigitado));
setLivrosPesquisados(resultadoPesquisa);
} else {
setLivrosPesquisados([]); // Se estiver vazio, limpe a lista de livros pesquisados
}
}}
Nele fazemos uma verificação se o campo está ou não preenchido e retornamos o valor preenchido na barra de pesquisa ou retornamos uma lista vazia em caso do campo não estar preenchido.
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!