Issue with Retrieving Coordinates from Firebase to Generate Map Markers

Question

My apologies, but I am still fairly new to React Native and my terminology and vocabulary is still rather limited. I am currently trying to generate map markers by fetching data from Firebase. As of now, I am able to retrieve the information with the coordinates in the variable finished; but I am having trouble updating the array of listingData. In Debugger mode, it shows that listingData is undefined

Also, I am not too sure about the second part of my code, which is suppose to hypothetically call upon the coordinates in listingData and then place the markers on the map.

If anyone has any suggestions that would be greatly appreciated.

Thank you very much,

Tam

export default class GetMarkers extends Component {  
    constructor(props) {
        super(props);
        this.state = {
            listingData: []
        }
     }

 componentWillMount(){
    let q = firebase.database().ref('profiles');
    q.on('value', (snap) => {
        var finished = []
        snap.forEach((data) => {
        let result = data.val();
        result["key"] = data.key;
        finished.push(result);
        })
        this.setState({
        listingData: finished
        })
    })
}

render() {
    return(
        <MapView>
            {this.state.listingData.map(x => (
              <MapView.Marker
                title={x.fName}
                key={x.key}
                description={'Test'}
                coordinate={{
                  latitude: x.lat,
                  longitude: x.lon
                }} />
          ))
        }
        </MapView>
    )
  }
}