fala moçada beleza professor Bruno voltando com o nosso novo curso de react na aula de hoje nós vamos aprender a transformar elementos de um Array informações de um Array em um objeto ou um elemento ou um componente do react orora pra aula então pessoal vamos lá com o projeto que nós estamos trabalhando aqui nós paramos exatamente nesse camarada aqui nesse conteúdo aqui e o que que é ah o conteúdo da aula de hoje o que que nós vamos aprender na aula de hoje as informações que nós utilizamos para esses cards aqui só fazendo uma revisão
isso aqui vem do card tá vendo do componente Card Que Nós criamos Tá e agora e nós que que nós femos Nós criamos um Car de manual para cada um dos produtos que a gente queria mostrar na nossa no nosso na nossa aplicação só que agora nós vamos simplesmente pegar um Array que tem as informações dos produtos tá E vamos criar um card para cada um desses elementos dessas informações que estiverem em um Array já é a a Digamos que o precursor da gente fazer o consumo de uma pi pegar o retorno e transformar esse
retorno em algo visível dentro da nossa página Então vamos lá vamos lá primeiro então nós vamos criar aqui o nosso Ah arrei beleza vamos chamar de produtos produtos e vai ser um Array de objetos Então nós vamos pegar aqui ó vamos criar Aqui nós temos a chave produto produto que vai ter o nome do produto tá nós pramos da chave valor que vai conter o valor do produto beleza é um tipo Number nós temos a chave desconto desconto que também é uma chave do tipo Number e ainda vai vamos ter aqui também a chave para
indicar se o produto está disponível tá que vai ser uma chave buana onde nós vamos colocar verdadeiro ou falso tá aqui o nosso arrei de produtos e agora vamos colocar os nossos produtos aqui nós tínhamos o mouse 49,90 tá como é uma Rei Vamos colocar uma virgul zinha aqui pra gente entrar com o próximo componente V colocar uns quatro aqui se não me engano nós tínhamos Mouse teclado monitor e CPU Vamos colocar mais um inclusive tá que vai ser o caixa cx som tá bom e todos por enquanto desconto zero e todos disponíveis o teclado
nós vamos coloc eu não lembro exatamente os valores que nós usamos lá mas vamos inventar aqui ó 6 5990 a CPU 82990 e a caixa de som e R 39,90 beleza Tá aqui o nosso arrei de e objetos cada objeto representa um produto legal geralmente é o que as apis que a gente consome vão tornar esse padrão Jon pra gente basta a gente ler esse retorno esse objeto e transformar isso aqui em um card esse é o nosso objetivo legal Então veja bem aqui na área dos cards ó nós vamos deletar tá deletei vamos ver
agora nós não não temos mais os produtos aqui sendo listados show como que nós podemos ler aquele vetor como que nós podemos ler aquele Array nós temos uma série de maneiras já que produtos aqui ó vou entrar com JavaScript então Chaves né produtos é um Array efetivamente eu posso dar um ponto aqui e usar uma série de métodos aqui para percorrer como por exemplo ã for each o método for each que aqui ó tá aqui ó for each legal aqui vem do JavaScript ah por exemplo Ah eu não quero usar for it vamos usar um
mais mais simples aqui ó map por exemplo lá no curso de typescript de JavaScript completo profissional eu mostro tudo isso mostro map for it mostro Filter tá mostro todas essas formas aqui da gente percorrer os arrs tá bom E como é que o método funciona bem rapidamente aqui quer aprender tudo sobre esses métodos assiste a nossa playlist do curso de JavaScript basicamente eu preciso de uma função para tratar elemento por elemento então a função map vai percorrer vai iterar aqui para mim o produtos tá e cada um dos produtos ele vai retornar aqui para a
função Então vamos criar aqui o parâmetro de entrada que nós vamos chamar de e é de elemento ou Element tá bom E aqui nós vamos e indicar o que que eu quero fazer com esse elemento se eu quiser retornar todos os elementos nós vamos dar aqui um return Ok e retornar o quê para cada elemento desse Array nós vamos retornar um card legal e o que que nós precisamos no card nós precisamos indicar aqui qual que é o produto eu preciso indicar qual que é o valor eu preciso indicar qual que é o desconto e
também tem aqui a função que é aquela função de calcular o desconto não é isso que nós pramos passar para o pro nosso Card bom de onde que vem o produto Tod aliás todas as informações produto valor e desconto vem daqui ó do elemento beleza do arrei produtos então pego aqui elemento ponto chave produto beleza valor elemento ponto chave valor aqui eu tô pegando exatamente as chaves que eu determinei aqui no arrei tá bom no meu objeto Jon ali e o desconto também é a mesma coisa de elemento pto desconto a função ela vem diretamente
daqui ó tem C calk Desk e Cal Desk 2 vamos usar cal Desk legal então Olha que bacana agora nós temos novamente aqui os nossos produtos de volta de acordo com os produtos que estão no nosso arrei produtos se eu adicionar mais um produto lá notem que ele vai aparecer automaticamente vai aparecer aqui ó vamos adicionar mais um aqui por exemplo microfone microfone o microfone vai tá custando R 65 redondinho ali beleza salvei e vamos lá olha aqui ó entrou o microfone ali Beleza então agora a gente renderiza agora a gente mostra os produtos a
gente disponib ia os cards de acordo com o retorno que a gente tem no nosso arrei produtos muito bem muito bem agora imagina a seguinte situação eu tenho aqui ó uma chave que é a chave disponível para indicar se o produto vai estar disponível ou não concordo que isso aqui deveria vir da api tá poder poder poderia por exemplo pesquisar somente produtos disponíveis e os que não estiverem disponíveis no sistema ela não vai retornar para mim bom mas não é o nosso caso agora sup que ela retornou todos os produtos e alguns produtos aqui por
exemplo caixa de som está indisponível e também monitor está indisponível nesse caso como nós fizemos os dois vão estar aqui ainda ó monitor e caixa de som mesmo que eles indisponíveis eles estão sendo listados aqui tá bom como que nós vamos resolver este problema vamos lá continuando aqui dentro do nosso script eu posso colocar uma condição para o retorno ele vai avaliar o elemento vai avaliar o valor do elemento e se estiver de acordo ele retorna senão ele não retorna Então veja bem eu posso colocar aqui ó um if indicar se elemento ponto disponível aqui
como disponível já é boleano eu não preciso testar o igual igual true tá ele já considera como ele já é boleando se for true ele executa aqui ó ele cai dentro do IF e retorna senão ele anda pra frente que ele não dá o retorno para este elemento legal Então veja bem eh um detalhe importante Por que que eu não coloquei as chaves aqui porque eu tenho uma um um um retorno só uma instrução só dentro do IF se eu tenho uma instrução eu não sou obrigado a colocar as chaves embora eu sempre coloque tá
Para que o código fica mais fique mais legível Tá bom então salvando aqui nós vamos ver agora que vamos retornar somente os produtos que estão disponíveis Olha lá legal se eu vamos lá de novo voltar aqui na minha lista de produtos ó vamos colocar todos os produtos disponíveis novamente true e true salvando abrir aqui todos os produtos estão de volta e a mesma coisa continua Funcionando aqui a questão desconto né vamos dar aqui R 100 de desconto para a CPU e r$ 1 de desconto para o teclado vamos ver aqui ó os dois produtos aqui
o o cálculo né o número ficou um pouco grande a gente tem que tratar isso aqui lá no nosso script né E para evitar esse esse número grandão quantidade de casas decimais mas a gente nota aí que tá funcionando legal onde houve desconto ele colocou lá vermelhinho né colocou o desconto e o preço sem o desconto tá vendo legal bacana e o preço 100 desconto não preço calculado né com o desconto e os outros não vamos só centralizar isso aqui né esse essas informações aí já é dentro do card né Onde que nós vamos centralizar
isso daqui aqui mesmo ó Flex ele é Flex então a gente pode colocar aqui ó um justify Center justify Center lá como Lembrando que o menex tou né então menex ele é o da vertical por isso que o justify Center foi o elemento que alinhou aqui na vertical bacana joia legal pessoal muito bom isso aqui esse assunto já é uma preparação tá para consumos de api a gente consumir conteúdo de uma API e retornar renderizar esse resultado dentro da nossa página espero que vocês tenham gostado vou ficando por aqui um forte abraço e até lá
até a próxima aula [Música]
