How do you map json in React?

Question

I'm trying to show the following Json in a table using react, but I'm not sure how I can access the elements that are inside the JsonArray of empresas , Bodega_Origen y Bodega_Destino .

  {
        "Estado": 1,
        "_id": "5e31ecf510ec6117387548a1",
        "usuarios": "5e262750803c451ca4a27c36",
        "empresas": {
            "_id": "5e2f4c3ef80d8246f0e545d8",
            "Nombre_Empresa": "ING. Y HER. S.A."
        },
        "Tipo_Documento": "AF",
        "Numero_Documento": "1",
        "Bodega_Origen": {
            "_id": "5e2619ccbb29d71aa8455cad",
            "Descripcion": "BODEGA PRINCIPAL"
        },
        "Bodega_Destino": {
            "_id": "5e2629f110b9f32d10524ca5",
            "Descripcion": "BODEGA Obra parma"
        },
        "Responsable": "Mauricio",
        "Estado_Documento": "PR",
        "Observaciones": "",
        "Detalles": [],
        "Fecha_Creacion": "2020-01-29T20:37:09.919Z"
    }

The following is the method I am using to obtain the data and parse it. You are currently browsing the data correctly, but it does not show the data that is within the Bodega_Origen y la Bodega_Destino.

  loadData(){
        var cont = 0;
        console.log('Getting list');
        const activeTab = this.state.activeTab;
        const ids = this.ids;
        const path = activeTab===0?'/empresa/list':'/articulo/list';
        console.log(this.state.listQuery);
        cont++;
        console.log(cont)
        return this.Requests.list(path, this.state.listQuery).then(response=>{
            if(response && response.length !== 0){// El request no ha devuelto un arreglo vacio
                let dt = response;
                dt.map((el,i)=>{
                    let filterProperties = [];//Propiedades de interes
                    filterProperties[i] = {};//Inicializar el objeto para cada elemento del arreglo
                    ids[activeTab].forEach(key=>{
                        if(el[key]._id){
                            el[key] = el[key].nombre;
                        }
                        filterProperties[i][key] = el[key];
                    })
                    return filterProperties;
                });
                console.log(dt);
                let stateData = this.state.data.slice();
                stateData[activeTab] = dt.slice();
                this.setState({data:stateData});
            }else{
                let stateData = this.state.data.slice();
                stateData[activeTab] = [];
                this.setState({data:stateData})
            }
        });
    }

Answer 1

Per se an Object is not iterable. You cannot map an Object like an Array in React. You can try it with Object.entries(obj) and then loop over those key, value pairs and get what you want.

Answer 2

To access that json data you will need to specify it:

 data.empresas data.Bodega_Origen data.Bodega_Destino

In that way you access the nested json object. JSON is an object type, not an array. Hope this helps :)