fala moçada beleza professor Bruno voltando com o nosso curso de react na aula de hoje vamos falar sobre renderização condicional vamos ver como é que funciona isso daí então pessoal vamos lá vamos continuando o nosso curso aqui vamos entender sobre um assunto que é o renderização condicional acho que é um momento legal pra gente falar disso daqui aproveitando a nossa construção aqui do nosso componente e o que que seria renderização condicional seria a capacidade que eu tenho de renderizar uma coisa ou não no caso aqui o desconto por exemplo é faz sentido eu mostrar aqui
o desconto e o preço de venda porque eu tenho um desconto aqui também e aqui também mas aqui não faz sentido porque ali eu não tenho efetivamente o desconto né então o preço de venda e o desconto ali não faz sentido é zero e o preço de venda é exatamente o mesmo tá nesse caso e eu não quero mostrar esse conteúdo eu não quero renderizar aquele conteúdo e aí entra então o caso da renderização condicional vamos lá pessoal Olha só e eu quero Vamos separar aqui ó eu quero renderizar ou não este conteúdo em relação
ao desconto se o desconto for maior do que zero eu mostro isso aqui senão não mostro tá basicamente nós vamos entrar com o teste JavaScript então Chaves e aqui eu posso utilizar de duas maneiras ou eu uso a operação ternária como ela é ou eu tenho ainda um resumo de uma operação ternária seria uma ocasião mais simples a ternária nós vamos usar quando eu tiver a condição verdadeira e falsa o resumo é só quando eu tiver condição verdadeira ele vai fazer for verdadeiro ele faz se não for ele vai embora na ternária eu tenho se
verdadeiro ele faz isso se falso ele faz isso então eu tenho duas coisas para ele fazer legal no resumido não vamos ver as duas situações aqui então eu quero fazer em relação ao desconto beleza é o que eu vou testar ó desconto beleza operação ternar por exemplo desconto maior do que zero operação ternária se for verdadeiro eu quero que caia aqui dentro se for falso eu quero que coloque só ali eh algo vazio tá E aqui pessoal funciona como função ou seja o parênteses espera que retorne só um componente então tenho que ter uma div
aqui ó que é o que vai ser retornado se eu quiser colocar mais conteúdo eu entro dentro dessa div aqui tá dando erro porque o desconto vem do props né aqui ó props ponto Opa props pon desconto legal e o que que eu quero retornar se o desconto for maior do que zero aí eu vou renderizar esses dois camaradas aqui ó Show Então veja bem desconto é maior do que zero se for verdadeiro eu renderizo o parênteses que essa div aqui com essas outras duas aqui e se não for eu retorno uma string vazia tá
vendo poderia retornar ali uma outra coisa por exemplo sem desconto aqui ó aqui ó pode colocar uma Dive aqui com texto por exemplo sem desconto tá div sem sem problema nenhum Vamos ver que funciona vai ficar bonito né aqui ó sem desconto tá vendo a outras não mas essa tá com zero e ele colocou sem desconto se eu vier aqui e colocar zero em outro por exemplo esse cara que também vai ser zero de desconto ele também vai ficar lá ó sem desconto os dois vendo se eu não quiser mostrar nada beleza vamos lá não
quiser mostrar nada esse retorno aqui do senão coloca ali para ele retornar uma string vazia agora não vai aparecer nada lá no lugar do desconto show legal bom ainda podemos facilitar isso daqui esse tipo de operação que seria um resumo ali ainda da operação ternária a operação ternária ela sempre precisa esperar ela sempre é o teste tá a condição verdadeira e a condição falsa só que notem que a condição falsa é o retorno de uma string vazia não justifica eu ter ela aqui então se agora se eu tirar ela aqui ó ele vai me dar
erro tá vendo olha aqui ó tá me dando um errinho aqui ó Nem sei se tá agora acho que dá para vocês verem aqui tá vendo nesse nesse nessa chave aqui ó se eu salvar vamos ver o que que vai acontecer Á tá dando erro Tá vendo porque ele tá esperando o falso da condução ternária é só eu transformar isso aqui ó tirando o interrogação do ternário e colocando aqui do e Comercial aí agora ele só espera o resultado da condição verdadeira se isso aqui for verdade Se isso for true ele entra aqui e faz
e se não for true para ele ele Ignora ele segue a entrega o fluxo aqui do programa Mas ele não faz mais nada tá vendo Então quando eu tiver essa situação é mais simples eu utilizar o e i em comercial duas vezes ali então isso é renderização condicional eu vou mostrar ou não alguns componentes em decorrência de um valor de um teste né um teste condicional Se eu quisesse retornar por exemplo eu quero deixar o preço de venda tá o preço de venda aqui ó fora para mostrar em todos em to toos Independente se vai
ter desconto ou não o preço de venda vai ser mostrado nesse caso eu não precisaria desta div aqui ó porque eu estaria retornando somente um componente olha ali ó não vou nem formatar ali porque eu vou voltar tá vendo vai funcionar normalmente tá então quando for um componente só a estrutura normal ali eu retornei uma div com os dois porque eu preciso de retornar dois componentes para essa para esse condicional para esse teste e isso também pessoal pode ser aplicado em formatação hum a gente pode colocar também essa parte aqui na de de renderização condicional
nas formatações por exemplo por exemplo Vamos colocar uma borda maiorzinha aqui ó border deixa eu ver aqui ó border traço deixa eu ver deixa eu lembrar aqui aonde que a gente informa o tamanho da borda aqui ó border tra um número vendo deixa eu ver aqui ó por exemplo border 4 salva á a bordinha mais grossinha tá vendo agora o que que eu quero fazer quando for e promoção quando tiver desconto eu quero que a bordinha fique vermelha e quando não tiver desconto eu quero que a bordinha fique azul é simples vamos lá vamos ver
olha só como que é ã vou aplicar a mesma técnica aqui ó desse esquema aqui só que agora eu vou fazer com ternário por quê Porque o dente tem duas duas situações se tiver desconto eu vou retornar a borda vem meinha se não tiver desconto eu vou retornar a borda Azul legal tá aqui ó que que eu vou fazer eu vou transformar esse esquema aqui ó e em JavaScript Então vou colocar ali o nosso template string colocar tudo dentro da chave que agora eu quero operar script aqui dentro no lugar da bordinha aqui ó e
aí vamos entrar aqui com o cifrão chave que é operação interna do template string quando eu quero injetar um script ali dentro beleza e aí nós vamos fazer exatamente a operação que a gente viu anteriormente aqui ó props P desconto se isso aqui for maior do que zero true ternário eu vou retornar a string border head head mesmo vermelhinho lá border head 700 legal e se se não for verdadeiro dois pontos abre a string lá eu vou retornar border Blue facilitar aqui ó Blue 700 também E aí podemos tirar esse border Red 700 aqui ó
porque agora a borda vai ser definida pela minha e pelo meu condicional aqui ó que eu vou dizer se vai retornar uma borda Vermelha ou uma borda Azul A diferença é que aqui eu precisei usar al ternário porque são dois retornos um para verdadeiro um para falso aqui eu pude utilizar o caso resumido que eu só quero retornar se for verdadeiro se não for falso eu se for falso Eu não quero fazer nada vamos ver aqui ó olha só Hum Olha lá que bacana já funcionou aonde eu tinha o desconto ele me colocou a borda
vermelha aqui ó vermelho vermelho onde eu não tinha desconto ele deixou a bordinha Azul show de bola pessoal Vamos alterar os nossos valores aqui ó eu quero passar por exemplo qu ninguém com desconto todo mundo vai ser zero zero de desconto vamos ver ó lá caixinhas normais sem nada nada vermelho nada de desconto vamos aplicar o desconto em um produto aqui ó esse aqui nós vamos aplicar um desconto de R 100 olha aqui ó vamos ver que ele é o único que tá lá vermelhinho apareceu aqui o desconto de R 100 e o preço de
venda que é o preço o valor menos o desconto show né pessoal é muito massa muito massa Então é isso aí Espero que vocês tenham gostado V ficando por aqui até a nossa próxima aula um forte abraço e tchau [Música] tchau i
