title: Highcharts - PieChart refreshes on click event that calls this.setState
body: <p>I have two pie charts from highcharts, and when I click a slice from the charts, I'd like for a list of tasks to show up in a table. Here is my parent component:</p>
  
  <pre><code>import React, { PureComponent, useState } from 'react';
  import { Grid, Container } from 'semantic-ui-react'
  
  import getTasks from './tasks';
  import PieChart from './PieChart';
  import TaskList from './TaskList';
  
  export default class Main extends PureComponent {
      constructor() {
          super();
          this.state = { 
              group1: {
                  series: getGroup1()
              },
              group2: {
                  series: getGroup2()
              },
              tasks: []
          }
          this.handleClick = this.handleClick.bind(this);
      }
  
      handleClick = (e) =&gt; {
          let selectedTasks = getTasks(e.point.name)
          let { tasks } = this.state;
          tasks = selectedTasks;
          this.setState({tasks});
    }
  
    render() {
      const {series} = this.state;
      return (
          &lt;Grid divided='vertically'&gt;
              &lt;Grid.Row columns={2}&gt;
                  &lt;Grid.Column&gt;
                      &lt;PieChart 
                          data={this.state.group1}
                          handleClick={this.handleClick}
                      /&gt;
                  &lt;/Grid.Column&gt;
                  &lt;Grid.Column&gt;
                      &lt;PieChart 
                      data={this.state.group2}
                      handleClick={this.handleClick}
                      /&gt;
                  &lt;/Grid.Column&gt;
              &lt;/Grid.Row&gt;
              &lt;Container&gt;
              &lt;Grid.Row columns={1}&gt;
                  &lt;Grid.Column&gt;
                      &lt;TaskList 
                          tasks={this.state.tasks}
                      /&gt;
                  &lt;/Grid.Column&gt;
              &lt;/Grid.Row&gt;
              &lt;/Container&gt;
        &lt;/Grid&gt;
      )
    }
  }
  </code></pre>
  
  <p>The tasks are passed to the TaskList child component as props. However, when the pie chart is clicked to trigger the <code>handleClick()</code> function, the entire chart refreshes, I'm assuming because the entire state is updated when <code>setState</code> is called - the pie charts are also fed data from <code>this.state.group1</code> and <code>this.state.group2</code>. </p>
  
  <p>What's the best way to feed the task data to the TaskList component without having the entire chart refresh when it's clicked? I assumed using <code>setState</code> would be the best way, but it looks like it is updating the entire state instead of just the <code>task</code> array.</p>