How to use react hook in Bubble chart using chart.js

Question

I'm trying to add new bubble in the chart whenever we click on add button I am able to update the state of data i.e. Chartdata using usestate hook but the chart does not re-render and does not show the chart according to the new updated data.

const data = 
{
  datasets: [{
      label: 'Grapefruit',
      data: [{
        x: 10,
        y: 40,
        r: 40
      }
    ],
      backgroundColor: 'rgb(255, 99, 132)'
    },
  {
    label: 'Lime',
    
    data: [{
      x: 23,
      y: 37,
      r: 40
    }    
  ],
    backgroundColor: 'rgb(0, 152, 102)'
  }
 ]
};

const  App = () => {

 
  const [chartData, setchartData] = useState(data);

   
   function callingChart(inputText,value)
   {
        
        const newl = [{x: data.datasets[1].data[0].x + l,y:data.datasets[1].data[0].y+ l,r:data.datasets[1].data[0].r + l}]
        data.datasets.push({ label: inputText,
        data: newl,
        backgroundColor: 'rgb(255, 128, 0)'})
               
     setchartData(data);          
      
    }     
   return (
    
      <div className ="bubble">  
           <BarChart data={chartData} options={options}/>
      </div>
  
  );
}

export default App;

I don't know what I'm doing wrong .

Answer 1

From what I can tell you are mutating the data object, which is a reference to the same object you initialized your chartData state to, and then save the mutated data object back into the chartData state.

In React you necessarily need to shallow copy all state that is being update. Create a newChartData object from the current chartData state and shallow copy the root properties, then declare a new datasets array by shallow copying the previous state's datasets array. This is a new array reference that you can push new values into.

function callingChart(inputText, value) {
  const newChartData = {
    ...chartData, // shallow copy chartData object
    datasets: chartData.datasets.slice(), // shallow copy datasets array
  }

  if (value === "lime") {
    const newl = [
      {
        x: chartData.datasets[1].data[0].x + l,
        y: chartData.datasets[1].data[0].y + l,
        r: chartData.datasets[1].data[0].r + l
      }
    ];
    newChartData.datasets.push({
      label: inputText,
      data: newl,
      backgroundColor: "rgb(255, 128, 0)"
    });

    l--;
  } else if (value === "coconut") {
    const newc = [
      {
        x: chartData.datasets[2].data[0].x + c,
        y: chartData.datasets[2].data[0].y + c,
        r: chartData.datasets[2].data[0].r + c
      }
    ];

    newChartData.datasets.push({
      label: inputText,
      data: newc,
      backgroundColor: "rgb(255, 128, 0)"
    });

    c--;
  } else if (value === "grapefruit") {
    const newg = [
      {
        x: chartData.datasets[0].data[0].x + g,
        y: chartData.datasets[0].data[0].y + g,
        r: chartData.datasets[0].data[0].r + g
      }
    ];

    newChartData.datasets.push({
      label: inputText,
      data: newg,
      backgroundColor: "rgb(255, 128, 0)"
    });

    g--;
  } else {
    const newm = [
      {
        x: chartData.datasets[3].data[0].x + m,
        y: chartData.datasets[3].data[0].y + m,
        r: chartData.datasets[3].data[0].r + m
      }
    ];
    newChartData.datasets.push({
      label: inputText,
      data: newm,
      backgroundColor: "rgb(255, 128, 0)"
    });

    m--;
  }

  setchartData(newChartData);

  console.log(newChartData);
}