title: How to dynamically show data in a pie chart using Reactjs and D3js
body: <p>I've been trying to create a pie chart using d3 and reactjs but not sure where to pass the data that I get from the api dynamically to the pie chart. Does pie charts in d3js accept objects as data because that's how I receive the data from the api, i.e, a label and value </p>
  
  <p>my code looks something like this</p>
  
  <pre><code>  performAnalysis = async () =&gt; {
      const { enteredText } = this.state;
  
      const body = { snippetdesc: enteredText };
      const stringifiedBody = JSON.stringify(body);
  
      const options = {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json"
        },
        body: stringifiedBody
      };
  
      const url = "/api/analyse";
  
      try {
        const response = await fetch(url, options);
        const result = await response.json();
        const {
          ...sentimentAnalysis
        } = result.scores;
  
        const sentimentAnalysisArray = Object.entries(sentimentAnalysis).reduce(
          (carry, [emotion, value]) =&gt; [
            ...carry,
            { emotion, value: parseInt(parseFloat(value) * 100) }
          ],
          []
        );
  
        this.setState({
          analysis: {
            ...this.state.analysis,
            sentiments: sentimentAnalysisArray
          }
        });
        console.log("the data"+"\n"+JSON.stringify(this.state.analysis.sentiments)); //need to send this sentiments object to the pie-chart
  
  
      } catch (error) {
        console.error(error);
      }
    };
  </code></pre>
  
  <p>the console log above gives an output like:</p>
  
  <p><strong>[{"emotion":"Neutral","value":52},{"emotion":"Positive","value":27}, 
    {"emotion":"Negative","value":19}]</strong></p>
  
  <p>I need to show the above "emotion" and "value" in the pie-chart as labels and values. How do I extract this data and send it to the hooks component?</p>
  
  <p>this is how it would look like in the render for sending the data to the PieHooks component:</p>
  
  <pre><code>return (
      &lt;div className="App"&gt;
        &lt;div&gt;
          &lt;button onClick={performAnalysis}&gt;Analyse&lt;/button&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;span className="label"&gt;Pie Chart&lt;/span&gt;
          &lt;PieHooks
            data={data}
            width={200}
            height={200}
            innerRadius={60}
            outerRadius={100}
          /&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  )
  </code></pre>