title: REACT state behaviour
body: <p>i have two states in my react code</p>
  <ol>
  <li>cityWiseOpenClosedSeries</li>
  <li>cityWiseOpenClosedSnags</li>
  </ol>
  <p>i fetch data from my api and store it in cityWiseOpenClosedSnags and based on cityWiseOpenClosedSnags i create cityWiseOpenClosedSeries. one a certain onClick, i change my cityWiseOpenClosedSeries according to a variable and again cityWiseOpenClosedSnags. this function is also changing my cityWiseOpenClosedSnags to which im not setting state to. any help would be appreciated. Code is pasted below.</p>
  <pre><code>class ProjectDashboard extends React.Component{
  
      state = {
  
          months : [],
          cities : [],
          cityWiseOpenClosedSeries: [],
          cityWiseOpenClosedSnags : []
      }
  
      openClosedCityClicked = (city) =&gt; {
          console.log('on function call', this.state.cityWiseOpenClosedSnags);
          var temp2 = [];
          this.state.cityWiseOpenClosedSnags.forEach(value =&gt; {
              if (value.city === city) {
              
                  temp2 = [{
                      name: 'open',
                      data: value.openSnags
                  }, {
                      name: 'closed',
                      data: value.closedSnags
                  }, {
                      name: 'total',
                      data: value.total
                  }]
  
                  this.setState({ cityWiseOpenClosedSeries: temp2 });
                  
                  
              }
          });
          
      }
  
      render(){
  
          const cityWiseOpenClosedChartOptions = {
              chart: {
                  type: 'column'
              },
              title: {
                  text: 'Snags'
              },
  
              yAxis: {
                  title: {
                      text: 'Number of Snags'
                  }
              },
  
              xAxis: {
                  categories: this.state.months
              },
  
              legend: {
                  layout: 'vertical',
                  align: 'right',
                  verticalAlign: 'middle'
              },
  
              series: this.state.cityWiseOpenClosedSeries,
  
              responsive: {
                  rules: [{
                      condition: {
                          maxWidth: 500
                      },
                      chartOptions: {
                          legend: {
                              layout: 'horizontal',
                              align: 'center',
                              verticalAlign: 'bottom'
                          }
                      }
                  }]
              }
          }
    
        return(
          &lt;div className=&quot;project&quot;&gt;
               &lt;HighchartsReact highcharts={Highcharts} options={cityWiseOpenClosedChartOptions} containerProps={{ style: { height: &quot;90%&quot;, width: &quot;100%&quot; } }} /&gt;
               {this.state.cities.map((city, index) =&gt; {
                  return (
                      &lt;div style={{ fontSize: '10px' }} key={index}&gt; {city} &lt;input type=&quot;radio&quot; name='city' onClick={() =&gt; this.openClosedCityClicked(city)} /&gt;&lt;/div&gt;  
                  );
              })}
              &lt;div style={{ fontSize: '10px' }}&gt; total &lt;input type=&quot;radio&quot; name='city' defaultChecked onClick={() =&gt; this.openClosedCityClicked('total')} /&gt;&lt;/div&gt; 
          &lt;/div&gt;
        )
      }
    
      componentDidMount(){
  
          Axios.post(process.env.REACT_APP_BACKEND_BASE_URL + 'api/snagDashboardInit')
              .then(res =&gt; {
  
                  this.setState({ months: res.data.months })
                  this.setState({ cities: res.data.cities })
                  this.setState({ cityWiseOpenClosedSnags: res.data.cityWiseOpenClosedSnags });
  
                  console.log('init', this.state.cityWiseOpenClosedSnags);
  
                  this.state.cityWiseOpenClosedSnags.forEach(value =&gt; {
                      if (value.city === 'total') {
                          let temp = [];
                          temp = [{
                              name: 'open',
                              data: value.openSnags
                          }, {
                              name: 'closed',
                              data: value.closedSnags
                          }, {
                              name: 'total',
                              data: value.total
                          }]
                          this.setState({ cityWiseOpenClosedSeries: temp });
                      }
                  });
  
                  //console.log(this.state.posts);
              }).catch(err =&gt; console.log(err))
          
      }
    }
    
    export default ProjectDashboard;
  </code></pre>