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

[Dúvida] Só retorna os livros quando digito o nome inteiro na busca

Referente ao curso React: comece seu projeto full stack, no capítulo Estados e atividade Atualizando estados com onBlur

por Kenzo Mariano De Oliveira
| 46.5k xp | 2 posts
SEO

Já revisei várias vezes e não encontro o problema: 

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: 270px;
    width: 100%;
`
const Titulo = styled.h2`
    font-size: 36px;
    color: #fff;
    text-align: center;
    width: 100%;
`
const Subtitulo = styled.h3`
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 40px;
`

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

    console.log(livrosPesquisados)
    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
                    const resultadoPesquisa = livros.filter( livro => livro.nome.includes(textoDigitado))
                    setLivrosPesquisados(resultadoPesquisa)
                }}></Input>
        </PesquisaContainer>
    )
}

export default Pesquisa
2 respostas
solução!
por Renan Lima
| 3695.2k xp | 7818 posts
Alura Scuba Team Apoio Educacional - Alura

Olá Kenzo.

Tudo bem?

Pelo que você descreveu, parece que o problema está relacionado com a sensibilidade à caixa das letras (maiúsculas e minúsculas) na busca. No JavaScript, a comparação de strings é sensível a maiúsculas e minúsculas. Isso significa que "Liderança" é diferente de "liderança".

Para resolver isso, você pode modificar o evento onBlur para converter tanto o texto digitado quanto os nomes dos livros para minúsculas (ou maiúsculas, se preferir) antes de fazer a comparação. Isso pode ser feito usando o método .toLowerCase() (ou .toUpperCase()).

Aqui está como você poderia ajustar seu código:

<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 também o nome dos livros para minúsculas antes de comparar
        setLivrosPesquisados(resultadoPesquisa);
    }}>
</Input>

Dessa forma, a busca não será mais sensível a maiúsculas e minúsculas, permitindo que resultados sejam encontrados mesmo se o usuário digitar "liderança", "Liderança", "LIDERANÇA", etc.

Espero ter ajudado. Qualquer dúvida manda aqui. Bons estudos.

por Kenzo Mariano De Oliveira
| 46.5k xp | 2 posts
SEO

Perfeito! Não tinha me atentado a isso, muito obrigado.