Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] Pesquisa com problema - não exibe os livros

Referente ao curso React: comece seu projeto full stack, no capítulo Estados e atividade Componentes dinâmicos

por Leticia Ferreira Da Silva Cruz De Lima
| 37.7k xp | 2 posts

Boa tarde pessoal,

Realizei o projeto acompanhando as aulas, porém estou com dificuldades no componente de pesquisa. Ao clicar no input e digitar um texto que está incluso no nome dos livros (ex.: "lid", "cang"), tenho como retorno um array vazio no console (console.log(resultadoPesquisa). Se não digitar nada no input, tenho como retorno todos os livros. Se alguém souber o que pode ser, agradeço muito qualquer ajuda.

dadosPesquisa.js

import livro from '../../imagens/livro.png'

export const livros = [
   {nome: 'Liderança em Design', id: 1, src:livro},
   {nome: 'Liderança em UX', id: 1, src:livro},
   {nome: 'JavaScript Assertivo', id: 2, src:livro},
   {nome: 'Cangaceiro em JavaScript', id: 3, src:livro},
   {nome: 'Aventureiros do Java', id: 4, src:livro},
]

index.js do componente Pesquisa

import Input from '../Input'
import styled from 'styled-components'
import { useState } from 'react'
import { livros } from './dadosPesquisa'

const PesquisaContainer = styled.section`
   background-image: linear-gradient(90deg, #002F52 35%, #326589 165%);
   color: #FFF;
   text-align: center;
   padding: 85px 0;
   height: 470px;
   width: 100%;
`
const Titulo = styled.h2`
   color: #FFF;
   font-size: 36px;
   text-align: center;
   width: 100%;
`
const Subtitulo = styled.h3`
   font-size: 16px;
   font-weight: 500;
   margin-bottom: 40px;
`
const Resultado = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 20px;
   cursor: pointer;
   p {
       width: 200px;
   }
   img {
       width: 100px;
   }
   &:hover {
       border: 1px solid white;
   }
`

function Pesquisa() {
   const [livrosPesquisados, setLivrosPesquisados] = useState([])
   function fazPesquisa(evento) {
       const textoDigitado = evento.target.value
       const resultadoPesquisa = livros.filter( livro => livro.nome.includes(textoDigitado))
       console.log(resultadoPesquisa)
       setLivrosPesquisados(resultadoPesquisa)
   }
     return (
       <PesquisaContainer>
           <Titulo>Já sabe por onde começar?</Titulo>
           <Subtitulo>Encontre seu livro em nossa estante.</Subtitulo>
           <Input
               placeholder="Escreva sua próxima leitura"
               onBlur={evento => fazPesquisa(evento)}
           />
           { livrosPesquisados.map( livro => (
               <Resultado>
                   <img src={livro.src}/>
                   <p>{livro.nome}</p>
               </Resultado>
           ) ) }
       </PesquisaContainer>
   )
}
export default Pesquisa

App.js

import Header from './componentes/Header/index';
import Pesquisa from './componentes/Pesquisa';
import styled from 'styled-components';

const AppContainer = styled.div`
    width: 100vw; 
    height: 100vh;
    background-image: linear-gradient(90deg, #002F52 35%, #326589);
`

function App() {
    return (
        <AppContainer>
            <Header />
            <Pesquisa />
        </AppContainer>
    );
}

export default App;

print da tela da aplicação

3 respostas
por Lorena Garcia
| 8346.8k xp | 12204 posts
Alura Scuba Team Suporte Educacional

Oii Leticia, tudo bem?

Pra te ajudar melhor e entender o contexto como um todo, peço que você envie o repositório do seu projeto completo, assim consigo ser mais assertiva na hora de te ajudar.

Um abraço e bons estudos.

por Leticia Ferreira Da Silva Cruz De Lima
| 37.7k xp | 2 posts

Oi Lorena, obrigada pela resposta! O link do repositório é https://github.com/LeticiaFerreiraLima/alura-books-react.git.

Abraços!

solução!
por Lorena Garcia
| 8346.8k xp | 12204 posts
Alura Scuba Team Suporte Educacional

Oii!

O seu código está um pouco diferente da aula. Mas basicamente a pesquisa tá sendo feita de forma case-sensitive, o que tá causando problemas. Ou seja, se você digitar com letra minúscula fará diferença pois no arquivo dadosPesquisa.js os nomes estão em letras maiúsculas, assim:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

A solução é converter tanto o texto digitado quanto o nome dos livros para minúsculas (ou maiúsculas) antes de fazer a comparação. Dessa forma, garantimos que a pesquisa seja case-insensitive. Fiz isso adicionandotoLowerCase.

Note que estou usando o código igual ao da aula, e indico que você faça o mesmo para manter a consistência.

import Input from '../Input';
import styled from 'styled-components';
import { useState } from 'react';
import { livros } from './dadosPesquisa';

const PesquisaContainer = styled.section`
    background-image: linear-gradient(90deg, #002F52 35%, #326589 165%);
    color: #FFF;
    text-align: center;
    padding: 85px 0;
    height: 470px;
    width: 100%;
`;

const Titulo = styled.h2`
    color: #FFF;
    font-size: 36px;
    text-align: center;
    width: 100%;
`;

const Subtitulo = styled.h3`
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 40px;
`;

const Resultado = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    cursor: pointer;

    p {
        width: 200px;
    }

    img {
        width: 100px;
    }

    &:hover {
        border: 1px solid white;
    }
`;

function Pesquisa() {
    const [livrosPesquisados, setLivrosPesquisados] = useState([]);

    return (
        <PesquisaContainer>
            <Titulo>Já sabe por onde começar?</Titulo>
            <Subtitulo>Encontre seu livro em nossa estante.</Subtitulo>
            <Input
                placeholder="Escreva sua próxima leitura"
                onBlur={evento => {
                    const textoDigitado = evento.target.value.toLowerCase(); // Convertendo o texto digitado para minúsculas
                    const resultadoPesquisa = livros.filter(livro => livro.nome.toLowerCase().includes(textoDigitado)); // Convertendo o nome do livro para minúsculas antes de comparar
                    setLivrosPesquisados(resultadoPesquisa);
                    console.log("Livros da pesquisa:", resultadoPesquisa); 
                }}
            />
            {livrosPesquisados.map(livro => (
                <Resultado key={livro.id}>
                    <img src={livro.src} alt={livro.nome} /> {/* Adicionei alt */}
                    <p>{livro.nome}</p>
                </Resultado>
            ))}
        </PesquisaContainer>
    );
}

export default Pesquisa;

Com essa modificação, a pesquisa deve funcionar corretamente quando você clicar fora do input, independentemente de o texto digitado ou o nome do livro estarem em maiúsculas ou minúsculas. Na aula também ocorre isso pois a pessoa instrutora também não fez a essa implementação.

Caso queira comparar todo o seu código com o da aula veja o repositório da aula.

Um abraço e bons estudos.