React - map over nested json not in an array

Question

I am trying to map over some json data which looks like this...

"array": [
        {
            "controlPanel": "00000000-0000-0000-0000-000000000000",
            "lastArmed": "2016-10-31T19:36:19.3943138",
            "lastDisarmed": "2017-02-04T22:50:47.3528838",
            "panelDateTime": "2019-10-14T09:00:31.0908467",
            "mainsConnected": false,
            "mainsLastActivated": "2017-04-19T04:53:47.9033877",
            "tamperStatus": "0",
            "activeFaults": "TwoW, AC, BP, DF, LV, NF, OP, SR",
            "battery": {
                "voltage": 0.0,
                "current": 0
            },
            "system": {
                "voltage": 6.515163,
                "current": 1547
            },
            "aux12V": {
                "voltage": 2.767401,
                "current": 119
            },
            "bell": {
                "voltage": 14.019639,
                "current": 405
            },
            "network": null,
            "temperature": 68.538864,
            "id": "fd14f8da-2175-e75d-e2a2-00647f9d3884"
        },

I keep getting TypeError: Cannot read property 'map' of undefined when doing this...

                        {this.state.controlPanelStatus.battery.map((b, bix) => (
                        <tr key={bix}>
                            <th>Battery Voltage (V)</th>
                            <td>{b.voltage}</td>
                            <td>Pass</td>
                            <td>10.5V&lt;&gt;14.5V</td>
                        </tr>
                        ))}

My state is defined like this...

class ControlPanelDetail extends React.Component {
    constructor(props) {
        super(props);
        this.timeIncrementMs = 50;
        this.showSpinnerIfReturnGreaterThanMs = 200;
        this.state = {
            loading: false,
            controlPanel: [],
            controlPanelStatus: [
                {
                    "battery": {
                        "voltage": '',
                        "current": ''
                    },
                    "system": {
                        "voltage": '',
                        "current": ''
                    },
                    "aux12V": {
                        "voltage": '',
                        "current": ''
                    },
                    "bell": {
                        "voltage": '',
                        "current": ''
                    },
                }
            ],
            toggledClearRows: false
        }
    }

and I am just loading the first entry from the api like this...

fetch('/api/controlpanelstatus')
    .then(res => res.json())
    .then(cp => {
        this.setState({
            controlPanelStatus: cp.array[0],
            isLoading: false
        });
        console.log(this.state.controlPanelStatus)
    })
    .catch(error => {
        if (error.response) {
            console.log(error.responderEnd);
        }
    });

all the data is loading correctly aprt from the nested json which im trying to map over. What am i doing wrong here? Is it because the json is not nested as an array eg []? Thanks.

Answer 1

I changed your code here at the .map() function. All I did was an exception handling at run time.

{
  this.state.controlPanelStatus &&
    this.state.controlPanelStatus.map((b, bix) => (
      <div key={bix}>
        // ...
      </div>
    ));
}