title: Update items and change Pie chart dynamically. React.js + D3
body: <p>I'm making a Pie chart which reflects changes of the number of items dynamically. I could count the number of items but I stacked the point of storing data into Pie Chart after updating items.</p>
  
  <p>I referred to this question : <a href="https://stackoverflow.com/questions/42665054/how-to-change-states-for-making-dynamic-pie-chart">How to change states for making dynamic pie chart?</a> </p>
  
  <p>I followed the same way but my data is not updated in my pie chart.</p>
  
  <p><strong>Image of pie chart</strong>  </p>
  
  <p>There are 5 questions category.</p>
  
  <p><a href="https://i.stack.imgur.com/40bRh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/40bRh.png" alt="enter image description here"></a></p>
  
  <p><strong>Image of items</strong> </p>
  
  <p>User can add and delete items. The number of items should be reflected in pie chart dynamically.  I made only question1 category for now.</p>
  
  <p><a href="https://i.stack.imgur.com/Ju0gT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ju0gT.png" alt="enter image description here"></a></p>
  
  <p>Code </p>
  
  <pre><code>export default class List extends React.Component {
  constructor(props){
      super(props);
      this.state={
          questionItem,
          pieData : [{label: "question1", value: 4}, {label: "question2", value: 10}, {label: "question3", value: 25 },{label: "question4", value: 5 },{label: "question5", value: 12 }]
  }
  }
  
  createItem(item){
      this.state.questionItem.unshift({
          item : item,
      });
      this.setState({
          questionItem : this.state.questionItem
      });
  }
  
  findItem(item) {
      return this.state.questionItem.filter((element) =&gt; element.item === item)[0];
  }
  
  toggleComplete(item){
      let selectedItem = this.findItem(item);
      selectedItem.completed = !selectedItem.completed;
      this.setState({ questionItem : this.state.questionItem });
  }
  
  saveItem(oldItem, newItem) {
      let selectedItem = this.findItem(oldItem);
      selectedItem.item = newItem;
  
      let length1 = questionItem.length;
  
      var array = [
      {label : "question1" ,value : length1 },
      {label : "question2" , value : length1 },
      {label : "question3" , value : length1 },
      {label : "question4" , value : length1 }, 
      {label : "question5" , value : length1 } ]
       this.setState({ questionItem : this.state.questionItem,
                       pieData : array });
   }
  
  deleteItem(item) {
      let index = this.state.questionItem.map(element =&gt; element.item).indexOf(item);
      this.state.questionItem.splice(index, 1);
      this.setState({ questionItem : this.state.questionItem });
  }
  
  render() {
      const { questionItem } = this.state
      return (
      &lt;div&gt;
      &lt;Chart data = { this.state.pieData} /&gt; 
      &lt;div className="list" style={{"display" : "flex"}}&gt;
      &lt;div className="titleElement" style={{"flex": "1", "backgroundColor" : "orange"}}&gt;Advice + FAQ &lt;/div&gt;
      &lt;div style={{"flex": "5", "display": "flex", "flex-direction": "column"}}&gt;
      &lt;QuestionList questionItem={this.state.questionItem} deleteItem={this.deleteItem.bind(this)}  saveItem={this.saveItem.bind(this)} toggleComplete={this.toggleComplete.bind(this)} /&gt;
      &lt;CreateItem questionItem={this.state.questionItem} createItem={this.createItem.bind(this)} /&gt;
      &lt;/div&gt;
       &lt;/div&gt;
       &lt;/div&gt;);
  }
  }
  
  class Chart extends React.Component {
  render(){
  var PieChart = rd3.PieChart
  var pieData = [{label: "question1", value: 4}, {label: "question2", value: 10}, {label: "question3", value: 25 },{label: "question4", value: 5 },{label: "question5", value: 12 }];
  
  return  (
   &lt;PieChart
    data={this.props.data}
    width={450}
    height={400} 
    radius={110}
    innerRadius={20}
    sectorBorderColor="white"
    title="Pie Chart" /&gt;
  )}
  }
  </code></pre>
  
  <p>Thank you for taking your time to read my question.</p>