Reactjs - React not rendering JSON

Andr233Lu237s
June 13, 2023
216 views
3 votes
3 Answers

I have the following codes that was supposed to render data from a json file. It doesn’t display me anything, except the h1 with the curly braces, instead of the data wanted. here is the code:

import prod from "../../data/produtos.json";

export default function Produto(props) {
  return (
    <figure>
      <img src={prod.imagem}></img>
      <figcaption>(prod.titulo)</figcaption>
      <p>(prod.preco)</p>
      <button className="btn"> Adicionar ao carrinho </button>
    </figure>
  );
}

import "./Produtos.css"
import productions from "../data/produtos.json";
import Produto from "./Produto";
import { useState } from "react";

export default function Produtos(props) {
  const [lista, setLista] = useState(productions);
  return (
    <div className="produtos">
      {lista.map((product) => (
        <div className="Products">
          <Produto id={product.id} {...product} />
        </div>
      ))}
    </div>
  );
}

[
  {
    "id": 1,
    "titulo": "",
    "preco": 16.9,
    "imagem": "../public/imagens/pwero.jpg"
  },
  {
    "id": 2,
    "titulo": "",
    "preco": 26.89,
    "imagem": "../public/imagens/oepw.jpg"
  },
  {
    "id": 3,
    "titulo": "",
    "preco": 17.4,
    "imagem": "../public/imagens/ewer.jpg"
  },
  {
    "id": 4,
    "titulo": "",
    "preco": 2.2,
    "imagem": "/////w"
  },
  {
    "id": 5,
    "titulo": "",
    "preco": 49.99,
    "imagem": ""
  },
  {
    "id": 6,
    "titulo": "",
    "preco": 5.99,
    "imagem": "zzzzys"
  }
]
=

it should be rendering the json data. I don’t know if the problem is in the map. The json file is imported right in both components.

Answers

try adding a return statement in the map.

Here is the snippet for the code :

import "./Produtos.css"
import productions from "../data/produtos.json";
import Produto from "./Produto";
import { useState } from "react";

export default function Produtos(props) {
  const [lista, setLista] = useState(productions);
  return (
    <div className="produtos">
      {lista.map((product) => {
       return (
        <div className="Products">
          <Produto id={product.id} {...product} />
        </div>
       )})}
    </div>
  );
}

In Produto, you need to access props (not prod) and use curly brackets {}. You should not be importing/loading any JSON at this point.

export default function Produto(props) {
  return (
    <figure>
      <img src={props.imagem} alt={props.titulo}></img>
      <figcaption>{props.titulo}</figcaption>
      <p>{props.preco}</p>
      <button className="btn"> Adicionar ao carrinho </button>
    </figure>
  );
}

I would initialize the lista state with an empty array and use an effect to either fetch it (recommended), or load it from the JSON file. Also, if you use Array.prototype.map, you should supply a key prop.

import "./Produtos.css"
import productions from "../data/produtos.json";
import Produto from "./Produto";
import { useEffect, useState } from "react";

export default function Produtos() {
  const [lista, setLista] = useState([]);

  useEffect(() => {
    setLista(productions);
  }, []);

  return (
    <div className="produtos">
      {lista.map((product) => (
        <Produto key={product.id} id={product.id} {...product} />
      ))}
    </div>
  );
}

You could alternatively load the JSON asynchronously.

useEffect(() => {
  (async () => {
    const response = await fetch("../data/produtos.json");
    const produtos = await response.json();
    setLista(produtos);
  })();
}, []);

1- You don’t need to import the data into your Produto component. Its code should be :

export default function Produto({ prod }) {
    return(
        <figure>
            <img src={prod.imagem}></img>
            <figcaption>{ prod.titulo }</figcaption>
            <p>{ prod.preco }</p>
            <button className='btn'> Adicionar ao carrinho </button>
            
        </figure>
    )
}

Instead of putting the js instructions in parentheses (), you must instead put them in braces {}

2- As far as the Produtos component is concerned, all you have to do is pass the product as an attribute of the Produto component

import productions from '../data/produtos.json'
import Produto from "./Produto"
import { useState } from "react";
export default function Produtos(props){
    
    const [lista, setLista] = useState(productions);
    return(
        <div className="produtos">
            {lista.map(product => (
                  <div className="Products">
                    <Produto id={product.id}  prod={product}/>
                  </div>
                ))}            
        </div>
 )
    }

Please signup or login to give your own answer.

Click here to cancel reply.

Reactjs – React not rendering JSON

Answers