title: How to fix the state update in react while getting data from firestore database
body: <p>I am trying to get data from firestore database and display it in react a component. I have made the connection with the database. I can view the data from the database in console log. But i can't seem to update the react component state after initial construction of the component. I am new to react and can't figure out what is going on. Below is my component code. </p>
  
  <p>I have tried moving the database call to the child component. And have the same issue. I have tried constructing the component with a initial state which looks like the data from the database. I have tried to remove the checks on the markers data to verify if it's undefined. And i still can't figure out what is the issue.   </p>
  
  <pre><code>import React, { Component } from 'react'
  import { Map, TileLayer } from 'react-leaflet'
  import MarkerList from './MarkerList'
  import './Basemap.css'
  import firebase from '../../config/fbConfig'
  
  class Turmap extends Component {
  constructor(){
  super();
  this.state={
    mapdata:[]
  }
  };
  
  componentDidMount(){
   const db = firebase.firestore();
   var turmarkers =[];
  
  db.collection("Markets").get().then((querySnapshot) =&gt; {
    querySnapshot.forEach((doc) =&gt; {        
      turmarkers.push(doc.data())
  
    })
  }
  );    
    this.setState({
      mapdata:turmarkers
     }) 
  }
  
  render() {
  
  var markers  = this.state.mapdata;    
  return (
    &lt;div&gt;
      {this.state.mapdata.length}
        &lt;Map className='map' center={[21,79]} zoom={4.3}&gt;
        &lt;TileLayer
        attribution='&amp;amp;copy &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      /&gt;
            {this.state.mapdata.length&gt;0 &amp;&amp; &lt;MarkerList markers = {markers} /&gt;}  
  
        &lt;/Map&gt;
  
    &lt;/div&gt;
  )
   }
   }
   export default Turmap
  </code></pre>
  
  <p>There are two documents in my firestore collection. I expect after the component loads, the componentdidMount will execute setstate for mapdata. And the updated state will re render the component. But the updated state in this.state.mapdata does not re render the component. so the length of this.state.mapdata is always 0 and never changes to the amount of data present in the database which is 2.   </p>