Armazenando dados com o Json e renderizando esses dados no React

Olá, seja muito bem vindo(a), Após configurarmos o Styled-components no artigo anterior: https://programacao-descomplicada.blogspot.com/2022/11/trabalhando-com-configjson-e.html, vamos retornar para o arquivo config.json para poder pegar nossas listas de produtos e organizar elas no Json assim como a imagem do banner.

"productList": {
"superMario": [
 {
  "title": "",
  "url": "",
  "image": ""
 }
]
 }

Vamos começar pela lista de produtos do Super Mario, lembrando que essas listas estariam todas no projeto antigo feito em HTML e CSS, no qual vou pegar os links das imagens do unsplash e as demais informações necessárias para completar os cards desses produtos.

Agora, eu criei um componente na pasta components chamado ProductList. Agora supondo que mais a frente teremos muitas outras listas de produtos dentro do ProductList no Json, iremos pegar as chaves do objeto com o Object.keys.

const ProductListNames = Object.keys(propriedades.ProductList)

Agora, vamos colocar a lista de produtos na tela, começando pegando o resultado da const ProductListNames e usando um .map na mesma, dentro do return da função do nosso componente.

export function ProductList(propriedades) {
 const ProductListNames = Object.keys(propriedades.ProductList)
 return (
<>
 {ProductListNames.map( function() {})}
</>
 )
}

Dentro da função do .map vamos passar a constante como parâmetro, além disso irei converter essa function para arrow function apenas retirando o nome “function” e colocando uma seta => após o parêntese da função. 

Para cada lista de produtos eu irei pegar os dados para colocar em um card, no qual vamos pegar os estilos do projeto anterior em CSS para nos poupar, caso queiramos alguma mudança na estilização faremos isso posteriormente.

const produtos = propriedades.ProductList[ProductListNames]

Essa constante, colocada dentro da função, nos retorna um array com os produtos que tivermos nas listas de produtos. Por fim retornamos cada produto como sendo um li com o html do card anterior:

export function ProductList(propriedades) {
 const ProductListNames = Object.keys(propriedades.ProductList)
 return (
<>
 {ProductListNames.map( (ProductListNames) => {
  const produtos = propriedades.ProductList[ProductListNames]

  return produtos.map( (produto) => {return (
   <li>
   <img src="" alt="" />
   <h3></h3>
   <p></p>
   <a href="">Ver produto</a>
  </li>
  )})
 })}
</>
 )
}

Repare que no nosso card anterior tinhamos uma imagem de produto, o nome dele, link e preço, então temos que colocar preço lá no nosso json para adicionar aqui também, e por fim adicionamos os dados.

<li>
 <img src={produto.image} />
 <h3>{produto.title}</h3>
 <p>{produto.price}</p>
<a href={produto.url}>Ver produto</a>
</li>

Para organizar melhor para quando adicionarmos ao Json as demais listas vamos organizar o return da seguinte forma. 

return (
   <section>
    <h2>{productListNames}</h2>

    <ul>
     {
      produtos.map((produto) => {return (
       <li>
        <img src={produto.image} />
        <h3>{produto.title}</h3>
        <p>{produto.price}</p>
        <a href={produto.url}>Ver produto</a>
       </li>
      )})
     }
    </ul>
   </section>
  )

Agora vamos importar o componente na tela inicial do projeto para isso eu fiz os imports do componente e do config.json e passei o config como parâmetro.

import { ProductList } from "../src/components/ProductList"
import config from "../config.json";

…

<ProductList ProductsList={config.productsList} />

Agora, o que eu fiz foi passar os dados dos produtos e construir todas as listas, além de passar o CSS via styled components para deixar os cards como estavam no projeto anterior, isso você pode ver no repositório do projeto em Next: https://github.com/fransilva0/projeto-e-commerce-nextjs, deixo um abraço para você a até a próxima.

Blog: https://programacao-descomplicada.blogspot.com/2022/12/armazenando-dados-com-o-json-e.html