I can't consume a JSON file

Question

I'm having problems trying to consume a JSON file, which contains id, images and other data. I'm using React JS to program and axios to do this search.

Archive api.jsx

import axios from "axios"
const api = axios.create({
   baseURL: 'https://godoydev.com.br/dados_temp/abaixo-10-reais.json'
})

export default api;

Archive index.jsx

import React from "react";
import * as Styled from './styles';
import api from "../../api";

class Cart extends React.Component {
state = {
    chocolates: []
};

async componentDidMount() {
    const response = await api.get("");       

    this.setState({ chocolates: response.data})
}

render() {
    const { chocolates } = this.state
return(

<Styled.Cart>
    <div className="boxProdutos">          
    {/* {console.log(chocolates.items)} */}
        {chocolates.map((choco) => (                
            <div className="produto" key={choco.items.id}>
            <div className="imagemProd">
                <img src={choco.items.imageUrl} alt="" />
            </div>
            <div className="conteudoProd">
                <div className="tituloProd">
                    <h6>Trufa de Morango</h6>
                </div>
                <div className="precoAnt">
                    <span>R$ 1,23</span>
                </div>
                <div className="precoAtual">
                    <span>R$ 1,11</span>
                </div>
            </div>
        </div>  
         ))}              
    </div>
</Styled.Cart>    
)
}
}
export default Cart;

Returns to me the following error "chocolates.map is not a function" I don't know what else to do, I've tried everything

Follow the link that the json file is online https://godoydev.com.br/dados_temp/abaixo-10-reais.json

Can anyone help me?

Answer 1

Isn't chocolates an object similar to?:

{ items: [...] }

if that's the case, you can't do map on an object. You can do it as chocolate.items.map, which I assume is probably what you wanted to do, or maybe I misunderstood the question.