title: React limits the number of nested updates to prevent infinite loops
body: <p>I'm using react js to show locations on map. and get the coords from a json file. I set up a button to select each.then when the coords are selected I have to rerender to display new info I've just got. but I have an error says :
  Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops</p>
  
  <pre><code>  const data = UserParents.all.children;
  
  class App extends Component{
  
  
   state = {
  greenIcon : {
    lat: 51.505,
    lng: -0.09,
  },
  zoom: 13,
  
     }
  greenIcon = L.icon({
  iconUrl : leafGreen ,
  shadowUrl : leafShadow ,
  iconSize:     [38, 95],
  shadowSize:   [50, 64],
  iconAnchor:   [22, 94],
  shadowAnchor: [4, 62],
  popupAnchor:  [-3, -76]
   });
        handleClick (userId) {
  
      if (userId == 3966){
          this.state.greenIcon.lat = User3966.coords[0].lat;
          this.state.greenIcon.lng = User3966.coords[0].lng;
      }else if (userId == 3967) {
          this.state.greenIcon.lat = User3967.coords[0].lat;
          this.state.greenIcon.lng = User3967.coords[0].lng;
      }else if (userId == 3968) {
          this.state.greenIcon.lat = User3968.coords[0].lat;
          this.state.greenIcon.lng = User3968.coords[0].lng;
      }else if (userId == 3969) {
          this.state.greenIcon.lat = User3969.coords[0].lat;
          this.state.greenIcon.lng = User3969.coords[0].lng;
      }else if (userId == 3970) {
          this.state.greenIcon.lat = User3970.coords[0].lat;
          this.state.greenIcon.lng = User3970.coords[0].lng;
      }
  
      this.forceUpdate();
  }
  
  
    render() {
  
  const positionGreenIcon = [this.state.greenIcon.lat, this.state.greenIcon.lng]
  return (
      &lt;div className="App"&gt;
           &lt;div&gt;
              {
                  Object.keys(data).map((key)=&gt;(
                      &lt;div&gt;
                          &lt;h4&gt;{data[key].name}&lt;/h4&gt;
                          &lt;h4&gt;{key}&lt;/h4&gt;
                          &lt;button onClick={this.handleClick()}&gt;Select&lt;/button&gt;
                          &lt;br/&gt;
                          &lt;br/&gt;
                          &lt;br/&gt;
                      &lt;/div&gt;
                  ))
              }
           &lt;/div&gt;
        &lt;Map className='map' center={positionGreenIcon} zoom={this.state.zoom} &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;
          &lt;Marker position={positionGreenIcon} icon={this.greenIcon}&gt;
            &lt;Popup&gt;
              A pretty CSS3 popup. &lt;br /&gt; Easily customizable.
            &lt;/Popup&gt;
          &lt;/Marker&gt;
        &lt;/Map&gt;
      &lt;/div&gt;
  );
   }
  }
      export default App;
  </code></pre>