Como implementar um filtro de busca em ReactJS

Поделиться
HTML-код
  • Опубликовано: 22 янв 2025

Комментарии • 75

  • @nicolasteofilo
    @nicolasteofilo 3 года назад +3

    Consegui aplicar em um prjeto que tinha que filtrar um tabela, valeu. Salvou aqui

  • @henriquenascimento3781
    @henriquenascimento3781 2 года назад +4

    Didática direta ao ponto. Show meu caro, foi de grande ajuda pra mim que sou iniciante. Parabéns!

  • @williamferreira6427
    @williamferreira6427 Год назад +1

    Amigo, estou criando um projeto para estudos com base nas atividade da empresa que trabalho, procurei em vários lugares e não encontrei a resposta, mas seu vídeo me ajudou a encontrar a resposta que estava procurando. Muito obrigado por sua disposição.

  • @Baronetee
    @Baronetee 2 года назад

    muito obrigado vinicius, eu estava preso nisso há uns 5 dias e seu vídeo me salvou

  • @ramonbatalha8687
    @ramonbatalha8687 2 года назад

    Muito bom!! Consegui implementar em um projeto com requisição ao Banco de Dados, tive que fazer pequenos ajustes, mas a base utilizada foi a do vídeo. Simples e direto ao ponto

  • @gustavodantasmarim2868
    @gustavodantasmarim2868 2 года назад

    Muito obrigado pela aula Vinícius. Estou fazendo um pequeno projeto em Next.js e TS e este vídeo me ajudou a chegar a uma solução de um filtro de buscas.

  • @estudosdopedro
    @estudosdopedro 2 года назад

    Bastante útil, agradeço por ter compartilhado o conhecimento de forma tão direta e simples !! Sucesso !

  • @rodrigopontes3269
    @rodrigopontes3269 10 месяцев назад

    Meu amigo, muito obrigado, por me ajudar no meu projeto de pokemons, não estava sabendo fazer, seu vídeo foi muito importante. Muito obrigado!!!!

  • @vagnerazevedo2014
    @vagnerazevedo2014 3 года назад +2

    Parabéns, Vinícius.
    Mostrou com uma didática muito boa.
    Sou iniciante no React e foi de grande utilidade esse vídeo.
    Novo inscrito.
    Abraço e sucesso ao canal.

  • @maykesilva2433
    @maykesilva2433 Год назад

    Tutorial muito bom. Me ajudou com um projeto que estava quebrando a cabeça. Parabéns mano!!

  • @carlosbrhenrique1963
    @carlosbrhenrique1963 2 года назад

    Vlw clareou mais aqui, eu tava bugando muito nessa lógica da busca, mas seu vídeo foi bem didático e me ajudou dms.

  • @BalduínoEstanislau
    @BalduínoEstanislau 2 года назад

    Ajudou muito. Muito obrigado. Explicou com simplicidade e conhecimento.

  • @gabriel_lk
    @gabriel_lk 2 года назад

    Consegui implementar o filtro puxando dados de uma API, muito obrigado!

  • @yRickz
    @yRickz 10 месяцев назад

    O ideal e jogar isso pro backend por causa do procesamento de dados etc, porem para meu projeto pequeno que nem tem backend direito serviu kkkk god dms esse mano

  • @joaovictormilhomem4590
    @joaovictormilhomem4590 3 года назад

    Eu tinha implementado uma busca muito parecida, e as dicas para melhorar o desempenho ajudaram muito aqui, obrigado!

  • @brunoventura4395
    @brunoventura4395 2 года назад

    Obrigado pela ajuda. Explica de modo simples e claro. Parabéns

  • @matheusnatalsantos21
    @matheusnatalsantos21 2 года назад

    Parabéns pela excelente didática professor, me auxiliou muito!

  • @luizitautec
    @luizitautec 3 года назад +2

    Muito bom. Parabéns.
    Eu tava mesmo com essa dúvida. Kkk... Seu vídeo acertou em cheio... muito obrigado

    • @viniciusdacal
      @viniciusdacal  3 года назад

      Valeuuu Luiz! Muito obrigado pelo feedback.
      Grande abraço.

  • @kun4876
    @kun4876 2 года назад

    Muito bom, mano. Me ajudou muito esse tutorial, estava com um problema com filtro que a sua solução ajudou muito.

  • @kelvyncarvalho
    @kelvyncarvalho Год назад

    Muito obrigado, foi bem útil, tava em dúvida como fazer via hooks!

  • @josuemendes8535
    @josuemendes8535 Год назад

    Que aula ótima, parabéns.

  • @jacksonmonteiro4658
    @jacksonmonteiro4658 Год назад

    Direto ao ponto! Show

  • @calivem
    @calivem 2 года назад

    Didática, ótima, parabéns

  • @Felipe-xk4yn
    @Felipe-xk4yn 2 года назад

    Parabéns pelo vídeo, boa explicação e direto ao ponto.

  • @rbpolim
    @rbpolim 2 года назад

    Valeu, Vinicius.
    Salvou aqui

  • @juniormelo26
    @juniormelo26 Год назад

    Muito bom, Parabéns!

  • @dvpatrick1203
    @dvpatrick1203 2 года назад

    Oloco, n conhecia o canal, mt bom me inscrevi ja

  • @naiandersonbruno1841
    @naiandersonbruno1841 2 года назад

    ótimo vídeo, obrigado por compartilhar.

  • @jhoonyb1745
    @jhoonyb1745 2 года назад

    Cara, esse video me ajudou muito, vlww

  • @cristianolima7296
    @cristianolima7296 3 года назад +1

    Gostei muito, belo vídeo

  • @joaovitorsabino1362
    @joaovitorsabino1362 2 года назад

    Valeu demais pela ajuda irmão

  • @cleitonrocha4749
    @cleitonrocha4749 2 года назад

    Salvou mano, obrigado!

  • @TheJerp04
    @TheJerp04 3 года назад +1

    @Vinicius Dacal, eu utilizei essa sua lógica dentro de um modal.
    Quando eu passo o autoFocus para o input não tenho nenhum problema, mas quando eu não tenho o autoFocus, e preciso clicar no input para digitar, o modal é renderizado novamente, e o input não fica com o focus.
    Tem ideia de como resolver esse problema?

  • @Gabweb95
    @Gabweb95 10 месяцев назад

    muito bom cara

  • @higorlokk
    @higorlokk 2 года назад

    Preciso de um filtro por checkbox para uma API, recomendaria algum arquivo ou vídeo ?

  • @viniciusilvabarros05
    @viniciusilvabarros05 3 года назад

    Salvou a nação aí

  • @joaomarques9888
    @joaomarques9888 2 года назад

    Bom demais.

  • @joaopaulorodriguespereira4768
    @joaopaulorodriguespereira4768 3 года назад

    Vinicius Dacal, porque o useMemo melhora a performance nesse caso? Como o listener é o valor de busca e a cada letra digitada é renderizado novamente a lista, têm-se um grande número de "buscas" efetuadas a cada letra digitada no input.
    Estou tendo ainda dificuldade de entender quando usar o UseCallBack e o useMemo e esse seu tutorial foi o que mais me passou algo dentro da realidade para entender na prática.
    Estou tendo que lidar no estágio com múltiplos filtros para o mesmo valor de dados, que mudam, mas com frequencia nao tão grande. Estou tendo problema tanto com essa questão do filtro de palavras e a melhor forma de integrar multiplos filtros.
    Sugestão para um novo vídeo, hahaha.
    Parabéns pelo o conteúdo, tem me ajudado muito.

    • @enriquesantosdeoliveira5798
      @enriquesantosdeoliveira5798 2 года назад

      O useMemo guarda o valor de uma variável que é sempre inicializada no primeiro no lifecycle do componente, se vc tem o valor que não precisa ser de fato recriado sempre que o componente mudar vc pode usar o useMemo

  • @leonardoantoniomaundokabon786
    @leonardoantoniomaundokabon786 Год назад

    Muito top

  • @agathamagnus3439
    @agathamagnus3439 Год назад

    Muito obrigada

  • @VoceBR97
    @VoceBR97 2 года назад

    Maneiroooo

  • @elvesbrito9633
    @elvesbrito9633 3 года назад +1

    Também gostaria de um filtro desse tipo retornando os dados de uma api, no meu caso tenho um array de objetos e preciso filtrar pelo titulo para exibir apenas o objeto que possui o titulo. Mas também gostei muito do vídeo parabéns.

    • @nicolasteofilo
      @nicolasteofilo 3 года назад +1

      é so fazer arr.title ( tipo isso )

  • @estevanulian
    @estevanulian 2 года назад

    Uma dúvida, esse método é escalável? Digo, se for uma aplicação com muita informação, essa forma dá conta do recado ou o código precisa de melhor tratamento?

  • @gustavosantos5889
    @gustavosantos5889 2 года назад

    Boa Noite, o video é otimo, porem ele pesquisa dentro de um array, como faço para pesquisar quando tenho um array com o nome chamados e dentro dele tem diversos objetos, cada objeto com um titulo dentro?

  • @alexbrunos
    @alexbrunos 2 года назад

    Cara, gostaria de saber se eu consigo puxar essa "lista" de um banco de dados, pra que o usuário pudesse buscar os itens cadastrados. Se sim, tem algum vídeo? Sou leigo.

    • @carlosbrhenrique1963
      @carlosbrhenrique1963 2 года назад +1

      Sim mano kkk

    • @carlosbrhenrique1963
      @carlosbrhenrique1963 2 года назад +1

      Cria uma api básica com Node e puxa com axios e joga tudo dentro de um array, aí vc utiliza a mesma lógica do vídeo

  • @henriqueprado6522
    @henriqueprado6522 2 года назад +1

    Muito bom! Tem alguma forma de fazer o filtro por com dois valores diferentes, exemplo: pela cor da fruta ou pelo nome dela?

    • @feliperibon8127
      @feliperibon8127 2 года назад +2

      Da sim.vc vc teria q fazer um objeto frutas [
      {"cor":"verde","nome":"limão"},
      {"cor":"roxo","nome":"uva"}
      ]
      E ai na parte de buscar ia ficar tipo assim frutas.cor.filter() || frutas.nome.filter()
      Respondendo do celular mas acho q da pra entender

    • @henriqueprado6522
      @henriqueprado6522 2 года назад +1

      @@feliperibon8127 Deu certo

    • @feliperibon8127
      @feliperibon8127 2 года назад

      @@henriqueprado6522 boa Henrique, eu estou aprendendo tbm, feliz q deu certo. Eu tô pesquisando q eu tô precisando fazer um search e quero dar um TAB ou clicar no item e listar ele na tela ja

  • @felipithiesen9626
    @felipithiesen9626 3 года назад

    Gostei do video, só que na hora de implementar na minha API, ele da erro na função startsWith e includes, poderia me ajudar?

    • @viniciusdacal
      @viniciusdacal  3 года назад +1

      Fala Felipi, tudo bem?
      Qual erro você está recebendo?
      Consegue colocar seu código no codesandbox ou no github? Aí fica mais fácil de ajudar.
      Grande abraço.

    • @felipithiesen9626
      @felipithiesen9626 3 года назад

      @@viniciusdacal Vou por e já te mando, o link do git

    • @felipithiesen9626
      @felipithiesen9626 3 года назад +1

      Criei no git, la tem uma imagem de como fica quando eu pesquiso, no caso estou pesquisando da minha API, uso mysql, e nodeJS para o back. Quando pesquiso qualquer palavra ele mostra todos os produtos do banco, eu tentei fazer do seu video, porém eu acabei indo pra outro video seu, que é o de animes, onde me ajudou mais, acabei tendo que fazer alguns ajustes, porém não sei se está certo. Usando o 'fetch', me retornava erro, ai acabei usando api.get + o caminho do link, voce vai quando abrir os codigos, separei em pastas front e back... segundo um outro desenvolvedor, ele me disse que eu teria que ver meu back onde chamo todos os produtos, mas nao sei se é isso, esta parte do código esta la tambem, segue o link e desde já agradeço a sua atenção: github.com/Felipithstdr/ProductFilter.git

  • @weversonluandesousa8152
    @weversonluandesousa8152 3 года назад

    opa amigo blz ? no funciona react-native ? aqui da dando ruim

  • @marquesita9108
    @marquesita9108 Год назад

    Muito massa! Só não entendi o useMemo

  • @nieldroidtutoriais9736
    @nieldroidtutoriais9736 3 года назад

    Olá como fazer em componentes Class no react.js (obs sou iniciante no react)

    • @josaphcascae5467
      @josaphcascae5467 3 года назад

      esquece class , hoje em dia a galera so ta usando compenentes funcionais...

    • @viniciusdacal
      @viniciusdacal  3 года назад

      Opa, eu implementei um exemplo de busca no codesandbox: codesandbox.io/s/throbbing-platform-zjkw2
      Mas caso alguém tenha a mesma dúvida. O aconselhável é implementar em hooks sempre que possível.

    • @weversonluandesousa8152
      @weversonluandesousa8152 3 года назад

      import React from "react"
      import {View,Text} from "react-native"
      class App exetends default Component{
      render(){
      return(
      Hello Word !
      )
      }
      }
      algo assim amigo deve ter caractere digitado errado e so corrigi mais essa e a ideia

    • @weversonluandesousa8152
      @weversonluandesousa8152 3 года назад

      @@josaphcascae5467 concordo e ate mais simple pra usar Hooks kkkk

    • @weversonluandesousa8152
      @weversonluandesousa8152 3 года назад +1

      faltou o Text dentro da View kkk

  • @williamfreitas
    @williamfreitas 3 года назад

    eu só não entendi essa função aqui startsWith?

    • @paulovargas3488
      @paulovargas3488 2 года назад

      Também estou pesquisando pq no meu nao deu certo

  • @deborasilva7162
    @deborasilva7162 2 года назад

    muito bom, só faltou o link no github

  • @Jack-ss4re
    @Jack-ss4re Год назад

    Vc vende cursos?