function Pesquisa () {
const [livrosPesquisados, setLivrosPesquisados] = useState([])
// Não será mais useState(''), pois não irá mais receber string
// Agora será useState([]), pois irá receber uma array (lista) de objetos
console.log(livrosPesquisados);
return (
<PesquisaContainer>
<Titulo>Já sabe por onde começar?</Titulo>
<Subtitulo>Encontro seu livro em nossa estante.</Subtitulo>
<Input
placeholder="Escreva sua próxima leitura"
onBlur={ evento => {
const textoDigitado = evento.target.value
const resultadoPesquisa = livros.filter( livro => livro.nome.includes(textoDigitado))
setLivrosPesquisados(resultadoPesquisa)
}}
/>
{ livrosPesquisados.map( livro => (
<Resultado>
<p> { livro.nome } </p>
<img src={ livro.src } alt='capa' />
</Resultado>
) ) }
</PesquisaContainer>
)
}
1
resposta
resposta
Todos os livros aparecem na tela ao entrar, não escrever nada (vazio) e sair (aciona o onBlur) do INPUT
Opa Diógenes, tudo certo?
Nesse caso, como estamos utilizando o evento onBlur no componente de entrada de texto para filtrar os livros com base no texto digitado, o evento onBlur é acionado quando o elemento perde o foco.
Uma possível solução para esse problema é verificar se o texto digitado está vazio antes de realizar o filtro. Você pode adicionar uma condição no seu código para fazer essa verificação. Por exemplo:
<Input
placeholder='Escreva sua próxima leitura'
onBlur={evento => {
const textoDigitado = evento.target.value
if (textoDigitado !== "") {
const resultadoPesquisa = livros.filter(livro => livro.nome.includes(textoDigitado))
setLivrosPesquisados(resultadoPesquisa)
} else {
setLivrosPesquisados([])
}
}}
/>
Dessa forma, se o texto digitado estiver vazio, a lista de livros pesquisados será definida como vazia, o que fará com que nenhum livro seja exibido.
Fico à disposição.
Tenha um bom dia e bons estudos.