Accessing fields in array

Question

I am pretty new to javascript and I can't seem to figure out how to iterate through the following array:

My variable is called data and the above screen shot is what I get with console.log(data).
I have tried using data.spots.map, but I am getting TypeError: Cannot read property 'map' of undefined. Here is my code:

const [listening, setListening] = useState(false);
    const [data, setData] = useState(0);

    let eventSource = undefined;


    useEffect(() => {
        if (!listening) {
            if (Platform.OS === 'ios') {
                eventSource = new RNEventSource("http://10.0.0.24:8080/parking/realtime");
                eventSource.addEventListener('message', (event) => {
                    let obj = JSON.parse(event.data)
                    setData(obj);
                });
            } else {
                eventSource = new EventSource("http://10.0.0.24:8080/parking/realtime");
                eventSource.onmessage = (event) => {
                    let obj = JSON.parse(event.data)
                    setData(obj);
                };
                eventSource.onerror = (err) => {
                    console.error("EventSource failed:", err);
                    eventSource.close();
                }
            }

            setListening(true)
        }
        return () => {
            eventSource.close()
            console.log("event closed")
        }

    }, []);

    return (
        <View style={styles.container}>
            <View style={styles.parkingArea}>
                <Text style={{color: 'white'}}>Details Screen</Text>
                {/*<Text style={{color: 'white'}}>{data.spots}</Text>*/}
                <View style={styles.row}>

                    {
                        //console.log(data.spots)
                        data.spots.map(
                            parkingSpot =>
                                <ParkingSpot text="1"/>
                        )
                    }
                    <ParkingSpot text="1"/>
                    <ParkingSpot text="2"/>
                    <ParkingSpot text="3"/>
                    <ParkingSpot text="4"/>
                    <ParkingSpot text="5"/>
                </View>
            </View>
        </View>

Is there any way to do this? Please help