Au 08 - Front-end - React - Filtrando dados na lista -

[Música] fala pessoal jancer aqui no vídeo de hoje é um vídeo onde a gente vai começar a trazer aqui um pouco de funcionalidade a mais aqui né pra aplicação na aula passada a gente estava trabalhando al com estilização aí nessa aula eu vou trazer aqui uma funcionalidade bem legal a gente vai explorar bastante aqui e como a gente soluciona alguns problemas no react e entender algumas soluções que a gente vai implementar no futuro Tá mas eu vou vou trazer essa funcionalidade aqui que é basicamente a funcionalidade de filtrar os elementos na lista né baseado no

preço que o preço foi o que a gente criou o Range Price Filter né que é aquele filtro com o slider que a gente consegue né arrastar e selecionar um valor então a gente vai implementar aqui a filtragem desses dados baseado nesse valor né e isso vai ser bem interessante que a gente vai explorar bastante aqui alguns dos problemas e eu vou trazer até a extensão aqui do react devus pra gente começar a entender um pouco mais do react em si e explorar isso nessa aula e já já ir preparando aí o ambiente pra gente

estar resolvendo eh ou entendendo melhor outras formas de resolver ou de abordar o o mesmo problema tá certo então se a gente vem aqui no código no código não né no web Ah o que a gente fez na aula passada foi basicamente esse cabeçalho aqui né o o Range Price Filter né esse aqui que eu tô arrastando e o botão né novo produto certo então Então hoje a gente já tá fazendo a listagem né a gente já tá buscando os dados do backend e trazendo fazendo essa listagem desses valores aqui na aplicação Então hoje o

que eu vou fazer é basicamente mudar aqui para mim exibir o nome e o preço desse item né desse produto e aí baseado nesse preço a gente vai fazer a filtragem tá E aí talvez na aula na próxima aula a gente já começa a trabalhar na estilização dessa lista porque na lista vai ter alguns botões que a gente vai fazer o uso para conseguir por exemplo apagar um um elemento aqui do do projeto do um produto né mas enfim nessa aula de hoje eu só vou alterar isso aqui vou colocar o preço e a gente

vai implementar a funcionalidade de de acordo eu for e fazer deslizar aqui né desse meu filtro de preço ele vai filtrar os elementos aqui na lista tá então se a gente vem aqui no código a gente já vai começar pelo se a gente vamos volar aqui em produto né na tela de produto no produto nós temos a componente né product sub header se a gente Abre ela tá aqui dentro o select Range Price Filter e o botão tá então dentro do Range Price Filter nós temos um state né e eu expliquei na aula passada na

aula passada não na nas aulas anteriores essa questão do Estado né que esse state é basicamente o que fala pro browser recarregar aquele elemento em tela né atualizar ele em tela E aí sim a gente vai ter uma uma atualização no visual da aplicação Então esse state ele tem esse valor né e esse valor é o que é usado para exibir ali no filtro de preço mas a gente vai precisar de ter acesso a esse valor aqui na tela de produto né no product na tela na na página products né então nessa a a componente

products né a tela a página products tem a componente product subheader e dentro de product subheader nós temos o Range Price Filter então a gente começa a perceber que no re a gente tem bastante essa tendência é muito fácil aprofundar em em nível de de filhos né uma componente tem outra componente que tem outra componente que vai aprofundando e esse fluxo de dados pode se tornar problemático né pode se tornar muito problemático muito muito difícil de dar manutenção então é uma coisa que a gente já já começa a perceber nesse projeto que é o projeto

Pequeno projeto simples e que de acordo se for escalando né o projeto vai escalando isso começa a se tornar um problema maior Então hoje O que que a gente vai fazer a gente vai abordar dar isso aqui tentar resolver esse problema essa questão dessa comunicação da forma comum né da forma que a gente que que a que a forma mais natural ou mais intuitivo de se fazer quando se trabalha com react e mais paraa frente mais no futuro a gente vai abordar e formas diferentes de resolver esse mesmo problema tá então no Range Price Filter

O Que Que É aconselhável da gente fazer aqui quando se trata dessas situações é da gente trabalhar com eventos né ou ou não bem eventos mas a gente ter o pensamento de evento e o que que é basicamente é basicamente a questão de callbacks né do JavaScript lá a gente tem essa ideia de callbacks que é basicamente eu envio uma função via parâmetro e essa função vai ser executada quando tal coisa tal um evento x acontecer Então nesse caso aqui do Range Price Filter a gente pode ter um evento né de de on value Change

ou on Price Change que seria quando esse filtro for alterado eu vou executar tal função né então no Range Price Filter eu receberia como parâmetro uma função que essa função ela seria executada e definida por alguém que estar usando essa componente então por exemplo o a nossa tela de produto tá usando o Range Price Filter e da tela de produto eu mando via parâmetro essa função que para ser executada quando o preço mudar né quando o filtro alterar o que que tem dentro dessa função pro Range Price Filter tanto pouco importa né tipo não não

para pra componente em si aqui tanto faz o que vai acontecer dentro da função a única coisa que tem que acontecer é que essa função que vai ser executada ela tem que saber qual o valor do filtro né o valor que está sendo alterado que a gente vai passar via parâmetro então Eh pode estar meio confuso aí para você mas de acordo a gente iniciar a execução aqui vai ficar mais claro tá então o que que eu vou fazer eu vou começar pela interface né pelo typescript que no typescript eu vou definir uma interface que

vai descrever as propriedades que essa componente vai receber então eu vou fazer aqui ó eu vou declarar né uma interface eu vou eu gosto de chamar isso aqui de props mesmo e aqui dentro eu vou ter uma função Então o meu Range Price Filter ele vai receber uma função eu vou chamar essa função de on Price Change eh e É pode ser on Price Change tá ela é uma propriedade é a gente pode declarar isso aqui dessas duas formas ó dessa forma e dessa forma aqui tá esses dois essas duas formas são isso aqui eh

são duas formas aqui eu tenho que ter uns dois pontos né isso aqui são duas formas de de declarar eh funções no typescript mas o que que o que que o que que eu tô falando aqui né como isso aqui é interface eu vou deixar a forma de cima tá como isso aqui é uma interface eu tô falando que dentro da interface eu vou ter a função né on Price Change essa função ela vai receber um parâmetro que parâmetro é e nesse caso é um parâmetro value né que esse value é de que tipo é

um número né um Number e isso aqui vai me retornar um void né O que que é esse void vai me retornar nada né e aqui eu poderia falar Fá se essa função vai retornar um número eu falar vai que retorna um Number um string né string enfim um objeto né um objeto com a propriedade V com que que é um string enfim a gente pode fazer várias coisas aqui nesse caso aqui essa função me retorna void e isso aqui novamente é uma interface ele só vai descrever o que que tem dentro de um objeto

então Eh se eu falo aqui ó aqui embaixo eu vou declarar uma const uma variável eu vou declarar um objeto né const vou chamar essa variável de teste ela vai receber um objeto tá objeto vazio e aí se eu falo que essa variável teste é do tipo props ou seja tô falando que esse obj essa variável ela dentro dela vai conter um objeto do tipo props E aí ele já começa a reclamar aqui para mim né que a propriedade on Price Change está faltando né nesse objeto então ele vai me forçar a a declarar né

a ter aqui dentro o One Price Change que é uma função que recebe um Val que é um número e retorna void não retorna nada então aqui seria meio que a implementação dessa função né ela recebe um v que eu falo que isso aqui é um número e ela não me retorna um void né retorna nada então aqui eu posso fazer por exemplo um conso log desse meu value que não retorna nada né se eu falar aqui que ao invés de retornar void ele retorna O number ele já vai dar erro aqui embaixo né porque

eu não aqui dentro na implementação né eu não retorno nada eu tenho que retornar aqui por exemplo colocar um retorno zero ele já para de dar erro né então a interface ela serve para esse fim para para guiar a gente de como vai ser implementado eh tal coisa tal função ou tal variável enfim como que aquele objeto deve e se comportar tá então essa próp aqui nesse nosso caso ela vai ela a gente vai receber esse objeto via parâmetro né então esse props aqui um objeto do tipo props vai vir via parâmetro da tela que

chama o Range Price Filter né da componente que chama Range Price Filter então aqui entre parênteses a gente passa obj um abre e fecha um objeto né e fala que esse objeto é do tipo props então a gente sabe que aqui dentro a gente tem a função on Price Change porque eu falei né eu fiz aqui a afirmação de que esse objeto que eu vou receber ver o parâmetro é do tipo pro props né então aqui dentro Eu sei que eu tenho on Price Change E aí E esse esse on Price Change é o evento

né que é a ideia da callback é uma função que vai vir ver o parâmetro e eu só vou executar ela e quando que eu vou executar né quando o preço alterar né Ou seja quando eu clicar lá no no aqui no se a gente vem aqui no Browser né quando eu clicar aqui no ícone né do do Slider e arrastar Então isso que acontece nesse onchange né nesse evento aqui on Change do meu input isso aqui nas aulas passadas a gente explorou né se eu venho aqui no meu console a gente pode ver que

ele tá deu um monte de console aqui né de valor que é o valor atual do nosso e Range Price Fi deixa eu até limpar aqui ó e se a gente move ele ele começa a fazer os logs aqui para mim na esquerda tá se a gente olha aqui no código o onchange desse input né quando ele alterar eu estou dando um console log né logando o valor e dando um set value né no meu US para definir esse valor né esse estado desse valor atual e logo aqui embaixo dentro desse dessa tag spam eu

exibo esse value né para ele ser exibido em tela né que é essa parte aqui da direita Tá certo então nesse on que eu vou executar essa função callback e para simplificar aqui as coisas eu vou fazer o seguinte é na verdade V fazer aqui ó depois de eu dar esse set value eu vou executar minha callback né a callback on Price Change então logo aqui embaixo eu executo né on Price Change essa função ela recebe um value né que é o número então seria esse passent aqui esse paciente novamente eu só tô convertendo o

valor para inteiro porque no evento do HTML ele vem como string né esse esse valor atual esse número ele na verdade ele vem um string então o paciente só converte então basicamente seria isso aqui para simplificar essa execução do do da callback e aqui a gente tá meio que implementando essa questão da callback Mas tá bem abstrato porque a gente não fez ainda a implementação dessa callback que vai ser executada mas logo logo a gente já vai fazer eu só vou simplificar aqui porque que até uma questão de boa prática aqui do react e tudo

que ao invés de eu ir declarando tudo que vai acontecer no end aqui dentro do elemento né do jsx eu crio uma função aqui antes de retornar né antes de eu retornar aqui do Range Price Filter eu vou criar uma função zinha aqui no já uma função normal eu vou chamar ela de handle Change né normalmente Essas funções levam o nome handle são funções handler né elas elas vão lidar com alguma coisa né Que coisa é essa ou vem logo após né nesse caso que é rendo Change ela vai lidar com a mudança aqui do

input Então dentro dessa função eu vou basicamente copiar aqui e colar ela vai dar eu vou tirar esse console logo a gente não precisa de ficar dando ele eu tô vou D um set value setando o valor do meu state e o on Price Change né executando da minha callback E aí dessa forma o que que acontece eh ele não sabe o que que é esse e né esse e que eu recebo como parâmetro aqui do onent que é um evento né aqui se a gente bota o mouse aqui em cima a gente até vê

né que é um react Change event um evento de mudança do HTML input Element E aí essa função handle Change ela também vai receber esse mesmo evento tá então eu vou falar que aqui ele recebe um e vou tipar ele aqui né passar os dois pontos para passar o tipo disso o tipo disso é aqui react Change event né vou selecionar selecionei e cliquei e arrastei aqui né ele já trouxe para mim então se eu salvo aqui para ele formatar a minha função rend Change ela recebe o evento e a executa alguma coisa né então

aqui dentro do un change a gente pode fazer o seguinte o anch é uma função e dentro dela eu vou chamar aqui o rendle Change passando esse meu evento tá a gente pode fazer assim tem nada de errado nisso mas a gente pode simplificar mais aqui essa parte do un chend que ao invés de eu receber um evento e repassar eu só passo mim a minha função rendow Change aqui para dentro dessa forma e aqui assim a gente já e definiu a interface a gente falou um pouco aqui do callback e recebeu isso aqui né

já tá mexendo aqui na regra de negócio desse meu componente Range Price Filter mas também a gente já tá tomando cuidado questão da organização Tá certo então só mais um detalhe aqui porque esse on Price Change né Essa callback a gente normalmente esses eventos a gente passa que eles com que eles são eh opcionais tá então basicamente é meio que a componente que chama o meu Range Price Filter ela pode ou não passar uma callback né uma uma função para ser executada quando eu Alterar o preço do meu input Então esse valor pode ser opcional

e no typescript PR gente falar que alguma coisa é opcional a gente passou uma interrogação e a partir do momento que ele é opcional eu não posso aqui dentro da da minha componente eh já ir executando de Cara essa função porque eu não sei se ela veio né Se ela foi definida Então antes aqui do on Price Change eu vou eu faço um if né a gente verifica ah on Price Change existe se ele existir eu executo dessa forma aqui já é a forma mais enxuta de fazer né mas a a a forma extensa de

fazer isso aqui é verificar se on Price Change é diferente né aí que eu uso exclamação igual igual é diferente de undefined porque quando eu não enviar esse on Price Change ele vai vir como undefined né então eu verifico se é diferente se for diferente de undefined eu executo a função mas a gente pode definir da forma mais simples também eu vou deixar dessa forma que tá aqui diferente de underfed Beleza então com isso aqui feito a gente já a a nossa componente Range Price Filter ela já pode receber essa essa esse evento né Essa

callback E aí a componente que usa o Range Price Filter é o nosso product subheader né então se eu venho aqui no product subheader tá aqui o Range Price Filter E se eu aqui ó eu vou eu vou colocar o mouse aqui antes de fechar a tag né vou dar um espaço se pressionar control espaço para ele me sugerir e quando ele me sugere aqui dentro eu já tenho o on Price Change né que é a callback que eu defini lá se eu passo que ela é obrigatória se eu tira a interrogação aqui né da

interface aqui já começa a dar erro no Range Price Filter porque já tá falando né que a propriedade on Price Change está faltando né nesse tipo aqui o aqui ele fala que é um objeto vazio que seria eh as propriedades que eu mando pro Range Price Filter né como eu não mando nenhum a o que que é propriedade seria eh tudo isso que a gente passa aqui ó se eu venho aqui no nosso HTML o HTML el tem um input né Eh na verdade a gente tem aqui a tag input do HTML e eu mando

propriedades para essa para esse elemento né que é Class name Type mínimo máximo enfim isso Esses são eh as propriedades né os atributos que a gente fala enfim Ambos são não que são equivalentes mas A ideia é a mesma né E aqui no Range Price Filter eu vou voltar ali o opcional né voltar interrogação mas aqui eu vou continuar passando né que a gente usa o Range Price Filter só em um lugar mas a gente tem que fazer essas nossas componentes sempre imaginando que vão ser reutilizáveis né reutilizadas em outros locais então que eu vou

passar o on Price Change e esse on Price Change ele recebe uma função ele é uma função né só que novamente eu não tenho essa função aqui né nesse no product subheader essa função ela vai ser criada em products então a gente já meio que tipo ah o que que eu faço agora né que vai ser basicamente um repasse eu vou falar que o product subheader ela pode receber o evento on Price Change E aí quando ela receber esse evento eu repasso pro Range Price Filter certo então a gente vai meio que refazer o que

eu fiz aqui em Range Price Filter né que é declarar essa interface E por que que eu estou declarando a interface duas vezes né Essa interface prop Porque toda componente no react é a mesma ideia da reutilização né ela tem que ter uma interface própria que descreve os parâmetros que ela recebe por mais que sejam iguais e a gente tem tem que ter esse hábito de criar uma Interface para cada componente porque ela futuramente nada garante que elas não irão mudar né E caso elas mudem a gente tem que tá pronto para receber essa mudança

então eu vou eu copiei ali né e colei essa interface eu vou chamar de props também sem problema nenhum porque ela é uma interface local né Ela tá aqui ela é dessa e componente Então a gente tem essa interface própr eu vou passar aqui ó na na componente c n na implementação da componente ou seja como parâmetro da função o objeto do tipo props e aqui nesse objeto ele tem aqui o on Price Change eu digitei aqui errado props apaga isso on Price Change e aqui eu vou repassar componente Range Price Filter então eu falei

que o meu product subheader pode receber uma função chamada on Price Change e eu repassei essa função pro meu Range Price Filter que é a outra componente aqui a componente do filtro em si né do ali onde a gente faz o controle do filtro Beleza então agora a gente volta um nível para cima que a gente chega na tela de produto né no products E se a gente dá um contol espaço aqui né para ver o que o que que ele sugere para mim na componente product subheader já vai ter aqui esse on Price Change

essa aqui ela é do próprio react eu não vou falar muito dela agora a gente vai falar dela no futuro mas basicamente toda componente tem essa questão daqui e a gente vai falar isso mais paraa frente na questão da do algoritmo de reconciliação e tal do react mas agora não é o momento tá mas aqui a gente já tem o on Price Change esse on Price Change Agora sim vai ser a função onde eu eu vou declarar a função que vai fazer a alteração que vai tratar essa essa filtragem dos dados né no caso aqui

para quando eu mexer lá no meu filtro então eu vou fazer o mesmo esquema que a gente fez aqui dentro de Range Price Filter eu vou criar uma função antes de retornar né criar a função aqui em cima antes do retorno aqui tá o retorno da componente esse retorno é a parte visual né antes de retornar eu vou declarar a função então aqui eu vou fazer a mesma coisa vou criar aqui uma função e vou chamar de handle Price Change né é uma função que faz alguma coisa essa função ela recebe o quê que que

a gente falou aqui no Range Price Filter né recebe um valor né o valor que foi alterado né o novo valor então vou passar aqui V Opa aqui não é aqui em cima né aqui dificuldade recebe um value que é um Number né o número e aqui dentro eu vou fazer alguma coisa nesse caso eu vou dar só um conso log tá pra gente ver tudo funcionando conso log value e aqui esse handle Price Change eu vou passar aqui no na propriedade on Price Change né aqui ele tá dando um erro por qu eu tô

falando que retorna um número é isso Cadê minha interface é aqui tá errado né o One Price Change eu tô falando que ele retorna um número mas não retorna o número nesse caso aqui ele retorna void não retorno nada né E aqui também no Range Price Filter retorno void tá eh beleza com isso aqui eu só tô Basic a implementação da função voltando aqui o fluxo né Eu tô aqui na tela de produto tá aqui a minha função handle Price Change essa função recebe um valor e dá um cons log desse valor eu pego essa

função envio via parâmetro para componente product subheader product subheader recebe essa função Repassa pro Range Price Filter né via parâmetro e aqui dentro o Range Price Filter pega essa função verifica se ela existe e executa ela passando o valor o novo valor né do meu filtro aqui de preço tá beleza então o fluxo tá sendo esse Vou salvar aqui Aqui eu só tô dando conta log né então vou voltar aqui no Chrome vou limpar o console e aqui se eu mexo no meu input né a gente vê que ele logo aqui na esquerda os números

né os valores e a gente pode ver que isso aqui é número porque mudou a cor né agora ele tá roxinho aqui no Chrome o esse quando é roxo é inteiro é número quando é branco é um string tá E só para garantir aqui dentro do Range Price Filter né no handle Change Ou seja a gente tirou Aquele consol que tava dando aqui né consol log e. target pval vou deixar ele aqui de novo só pra gente ver funcionando com ele né que vai dar dois consoles né o branco aqui é da string é do

valor eh lá lá dentro de Range Price Filter e esse de fora aqui é da callback né do evento que a gente tá criando que tá sendo executado sempre que o preço alterado Beleza eu vou tirar esse consol aqui de dentro coloquei aqui só pra gente testar do Range Price Filter e vou voltar aqui na tela de produto tá na nossa página de produtos porque agora a gente vai entar aqui a questão do eh a questão do a questão do filtro né Essa essa questão aí de filtrar Os dados aqui da lista mas antes disso

eu vou mostrar aqui para vocês uma coisa bem interessante do nosso do nosso navegador né porque no navegador eu vou abrir aqui uma nova página e vou pesquisar aqui pro react developer Tools tá vou clicar aqui ele tem o link aqui no caso como eu tô no Chrome das extensões né aqui do Chrome Web Store que é uma extensão que a gente instala no caso que eu já instalei se você instalar eh bem provavel que você vai ter que reiniciar o navegador para ela aplicar mas é basicamente quando a gente é uma função que ajuda

a gente na no desenvolvimento né E se eu venho aqui no meu react app EH no developer Tools tá na parte superior aqui onde a gente troca pros elementos pro console pro sources para ver aqui a parte de Network né de do das execuções as requisições que são feitas pra web a gente vai ter que também é vai ser adicionado aqui né duas opções que essa opção de componentes e de profiler tá então a gente pode abrir aqui o component a gente pode ver aqui a A Árvore né de componentes que está sendo criada para

essa nossa aplicação ele indica que onde é que tá com erro né O que que é o erro enfim É bem interessante Tá mas e a gente tem aqui também o profiler né E no profiler é basicamente onde a gente faz essa questão de monitoramento de performance da aplicação e tempo de é basicamente a Performance em si e se a gente clicar aqui nessa engrenagem né na engrenagem de dentro aqui do profiler a gente vai ter aqui uma opção para dar um Highlight updates o component o components render é o que que é isso aqui

sempre que uma componente for renderizada através do nosso US state lá ele vai dar um Highlight ele vai meio que piscar né vai ter um Highlight aqui na tela pra gente ver que atualizou Então isso é bem interessante pra gente entender o que o que vai acontecer agora tá que é basicamente o que que acontece eu só vou ativar essa opção né e vou voltar aqui pro pro console mesmo se eu eh ele não tá aplicando deix eu só ter certeza aqui eh tá eu voltei aqui eu dei uma olhadinha aqui foi só basicamente eu

fechei o navegador e abri de novo e ele voltou a funcionar né Essa opção aqui do profiler tá tá marcado aqui e aí quando eu mexo aqui no meu eh no nosso Range Price felter né no input aqui do tipo Range ele tá com essa bordinha amarela tá então a gente pode ver que quando começa a mexer ele tá azul e aí depois ele fica amarela ele tem três cores ó lá ficou azul quando eu mexo pouco né basicamente quando ele fica azul é quando ele renderiza poucas vezes né quando ele fica laranja é que

ele já tá renderizando muitas vezes e quando fica vermelho aí já tá no nível absurdo de renderizações extras tá Por que que tá ficando laranja né porque para cada unidade do input né do do nosso aqui do nosso filtro que é alterada ele renderiza uma vez Então como que tá de zer a 100 se eu arrasto aqui tá em 49 eu vou tudo pra direita aqui ele rizou novamente 51 vezes né que foram 51 unidades que alteraram E aí essas alterações e executaram 51 vezes essa função aqui nesse evento on Change aqui do nosso Range

Price Filter né o input tem o evento on executou 51 vezes e a gente setou o state 50 uma vezes né então isso é detalhe tá a gente pode tá se preocupando aí nessa questão de quantas e vezes a gente vai disparar um evento de tal elemento Mas a gente não vai se preocupar com isso agora o que eu quero mostrar para vocês é que a gente consegue fazer essa monitorar né e ter uma noção aí melhor do que que tá acontecendo e usando essa extensão aqui do react Death Tools para mostrar pra gente que

algo tá piscando ali né e nesse nosso caso que algo tá piscando não que algo tá sendo recarregado tá E aí ele vai piscar em tela eh nesse nosso caso o que que vai acontecer agora eh quando a minha Deixa eu voltar aqui no código tá dentro do meu Range Price Filter ou seja dentro do da componente aqui que tem o filtro eu sei qual é o valor atual eu sei qual que é o estado atual E aí sempre que eu altero esse estado ele altera o state e Render como a gente viu só recarrega

a componente do Range Price Filter tá E nesse caso o que que eu vou querer recarregar a minha lista de produtos porque baseado no na alteração ali a lista de produtos vai ter que recarregar para calcular novamente qual produto vai ser exibido e qual produto não vai tá então para isso acontecer o que que a gente vai fazer aqui agora tá a gente vai fazer isso aqui agora para fazer isso funcionar na minha componente de produto eu vou ter que ter um state tá um State com eu vou eu vou chamar de Price Filter ou

Filter value que é o que nesse state eu vou armazenar esses valores que estão chegando aqui através da minha função handle Price Change né que é essa minha callback é esse meu evento que está sendo executado para cada vez que eu altero o valor lá do meu do meu filtro né então então com um state aqui esse state ele vai renderizar toda a componente products tá então sempre que eu alterar o meu filtro ele vai recarregar e renderizar novamente a componente products E aí nesse momento a gente vai recalcular o que vai ser exibido na

lista tá então a ideia vai ser basicamente essa eu abordei essa parte do do react Dev Tool PR que a gente vai ver a diferença porque agora quando eu mexo eu só renderizo o meu filtro né E aí quando eu fizer essa alteração ele vai renderizar a componente inteira Tá beleza então vamos lá fazer isso aqui que eu basicamente eu vou ter um um novo US state né então vou chamar de falei de Price Filter né Price Filter set Price Filter vai receber um US state que isso aqui pode começar com zero tá zero isso

pode começar com zero E aí dentro da minha função rendle Price Change ou seja sempre que o preço alterar eu vou dar um set Price Filter com o meu value né com o valor novo então basicamente vou pegar o valor e armazenar nesse meu state Vou salvar se a gente volta aqui no react app né no Dev Tool no nosso browser e eu mexer no meu PR no meu filtro a gente pode ver que tudo agora tá ficando laranja né todas as componentes isso Por novamente agora o que que tá acontecendo a a componente de

produto né o a tela de produtos como o state ele tá sendo declarado nela na tela de produto essa tela inteira tá sendo recarregada E aí dentro dela aqui no nosso jsx né Nós temos o product subheader dentro de product subheader nós temos um select nós temos o Range Price Filter e nós temos o nosso botão né e um H1 aqui escrito produtos então tudo isso como tá tudo dentro de da tela de produtos vai ser recarregado também né vai ser renderizado novamente então por isso que todos eles ficam ó já parou de funcionar o

o Highlight mas deixa eu atualizar a página para ver a gente tá com erro aqui de kys né do no console e isso aqui a gente vai eu vou abordar na aula de kys Tá então vamos só limpar aqui o console agora né voltou só atualizei a página voltou a gente mexe né E tá a gente pode ver que todas as componentes né o H1 e produtos o Na verdade o H1 de produtos não né ele não tá sendo rizado mas a gente vai começar a entender o que fazer para evitar que por exemplo o

nosso select né esse select aqui ver produtos ele não não tem nada sendo alterado nele então não tem motivo para ele ser recarregado renderizado novamente todas essas vezes o botão novo produto também então é uma é uma questão uma conversa bem interessante sobre performance né sobre como que a O que fazer para otimizar a aplicação que a gente vai ter isso mais paraa frente né Agora eu só tô apresentando para vocês o problema beleza E agora como a aplicação ela é simples né a gente não tem Impacto nenhum de performance mas novamente quando isso aqui

vai crescendo isso pode gerar problemas tá então agora o que que eu vou fazer sempre agora eu já tô tendo um state aqui na minha tela de produtos com esses valores atualizados com os valores do filtro né de preço atualizados então aqui depois da minha função rend Price Change eu vou fazer o seguinte vou declarar um variável chamar aqui de products products filtered filtered que é o qu o que que vai ter dentro dessa variável uma lista de produtos filtradas filtradas baseado em qu no nosso preço no nosso filtro aqui de preço Então por que

que eu tô fazendo uma variável porque sempre que o preço alterar eu estou dando um set state né o set Price Filter e sempre que eu seto um novo state essa componente ela vai ser recarregada como a gente viu lá no Chrome quando ela é recarregada tudo aqui dentro é recalculado tá é tudo é recalculado é reexecutados é é re é redeclarar né que aqui é uma função e os effect também a gente executa uma função né Mas aqui tem aquela questão do a rede dependência e tal falei em aulas passadas por isso que ele

não fica recarregando e refazendo essa requisição várias vezes e nós teremos aqui também a declaração de um variável que aqui dentro Eu vou ter um filtro Então esse filtro ele vai ser recalculado né porque a a componente a tela está sendo recarregada E aí eu vou pegar essa variável products filtered e mostrar né e exibir ela em tela Então sempre que o state altera eu recalculo o filtro e uso os dados do filtro para mostrar em tela Beleza então a ideia vai ser essa aqui em products filtered ele vai receber a nossa lista de produtos

que é o products list né que a gente pega aqui da api do backend então ele vai receber product list P Filter eu vou filtrar dentro de prod prod list né cada item de products list é o quê é um produto Então vou chamar aqui de product Isso aqui é uma função né é a função que calcula o filtro Então dessa função eu só vou retornar e nesse filtro né Eu só vou retornar dele ou seja os dados que serão filtrados serão os dados cujo o product né ou seja product ponto e Price né seja

maior do que o meu filtro né que eu chamei aqui de product Price Filter né Price Filter certo então basicamente eu vou filtrar a minha lista de produtos e só vou retornar os produtos cujo o preço for maior do que o do meu filtro e aqui a variável products filtered né eu vou baseado nela Então aqui products list P lank eu vou trocar para products filtrage e products list.map eu vou trocar para products Filter também eu vou passar um maper né mapear essa minha lista de produtos e retornar aqui eu tô retornando um H2 Tá

eu vou mudar isso aqui e ao invés de retornar um H2 eu vou retornar aqui uma div tá dentro dessa div eu vou ter um spam eh na verdade esse H2 vou mover ele aqui para dentro porque ao invés de ser H2 vai ser um spam também com o nome do produto e com um prod P Price né e deixa eu salvar isso aqui ele tá com ponto e vírgula aqui eu vou apagar isso eu vou mapear né Essa minha lista de produtos e vou retornar o nome do produto e o preço dele né para

ser exibido em tela tá dentro de um aqui é o HTML básico né Eu posso até colocar aqui um tracinho né Depois do nome para ele organizar lá para mim então voltando Aqui nós temos aqui né o nome do produto te clado e o preço 2500 notebook 400 monitor 2500 enfim valores e produtos monitor 2 2500 Tá beleza então o que que eu vou fazer agora acho que agora já tá tudo funcionando né vou mexer aqui no no Ah tá não vai funcionar porque o meu filtro ele vai de zero a 100 tá nesse caso

aqui tudo é maior do que isso né 400 é o mínimo então então eu vou lá no meu Range Price Filter aqui no código né vou abrir aqui o Range Price Filter e aqui o tipo dele nós temos aqui passando aqui no no input né o valor mínimo e máximo Tá 0 e 100 eu vou deixar zero e 1000 talvez pode ser 1000 né que a gente vai conseguir filtrar aquele item com o valor 400 Tá beleza então voltar aqui no nosso react App e aqui se eu altero o filtro a Pode ver lá tá

200 300 ó passou de 400 ele já filtrou aqui removeu aquele item com valor 400 da minha lista né Então tá tudo funcionando lá ó remove o notebook quando eu passo de 400 ele adiciona é que os outros aqui estão tudo 2500 né então né não vai dar para filtrar na próxima aula eu vou adicionar mais dados aqui PR gente brincar melhor com esses valores né Mas a gente pode ver que o filtro já tá funcionando né Só Mais um detalhe aqui que eu vi ali agora que a gente foi mexer no nosso Range Price

Filter que ó se eu atualizo a página o meu Range Price Filter o o o a posição aqui né do da bolinha a bolinha né voltando na bolinha aqui não tá no início né porque se ele começa em zero esse filtro aqui ele tem que começar totalmente na esquerda né e não é o caso por quê Porque aqui no input a gente tem uma propriedade aqui dele também chamada value né Qual o valor desse meu input eu posso passar aqui por exemplo zero ou sei lá 100 E aí ele vai ficar sempre na posição 100

por mais que eu clique e mova ó o valor tá mudando o nosso evento muda só que como eu passei lá o Val fixo né isso aqui a gente chama de componente controlado né as controler de components e eu tô cont colando o valor dela né o valor que ela vai exibir né visualmente aqui a bolinha não move porque eu passei o valor aqui fixo e nesse caso esse value ele vai ser sempre ser o mesmo do meu US state aqui né value set value que tá novamente isso aqui é dentro da componente Range Price

Filter então eu vou copiar aqui o value do state e o meu value o value a o atributo né value do input do meu elemento input do html é igual o value do meu US state tá então quando eu salvo isso aqui agora voltou o comportamento padrão né E sempre que eu atualizar a página ele vai Sempre iniciar à esquerda se eu falar que o meu US state começa com o valor 100 e salvo ele já e atualiza a página né o valor aqui na direita é 100 né que tá sendo o valor atual do

filtro e a posição dele também é referente à posição 100 Beleza então vamos manter assim dessa forma para ter esse cuidado aí com o visual Tá certo então para essa aula é isso tá a gente fez essa questão da funcionalidade entender um pouco aí da comunicação do envio de dados de uma componente para outra e lá no futuro a gente vai explorar melhor as formas melhores de resolver esse problema né que é essa questão do próprio drilling né que é a questão de pegar uma propriedade no topo e enfiando e mandando ela paraos filhos via

via propriedade né via parâmetro Tá certo certo então PR essa para essa aula é isso eu espero que eu tenha ajudado qualquer dúvida pode deixar um comentário logo abaixo e é isso aí muito obrigado e até a próxima [Música]