score:1

Accepted answer

just write a method upside the render() in billschart

    componentdidupdate(prevprops) {
    if (prevprops.spendings !== this.props.spendings) {

     let {chartdata} = this.state;
     chartdata.datasets[0].data = this.props.spendings
     this.setstate({chartdata});

    }
  }

score:0

you are setting the prop spending on your billchart in the render, which is passing an empty array as a prop to the component.

this.state = {
   groceries: 10,
   shopping: 0,
   health: 0,
   houseneeds: 0,
   total: 0,
   chartdata: []
 };


 <billchart spendings={[this.state.chartdata]} />

so when you setstate on chartdata in your billschart component it is setting the data property to that empty array.

this.state = {
   chartdata: {
     labels: ["groceries", "shopping", "health", "house needs"],
     datasets: [
       {
         label: "amount spent",
         backgroundcolor: "green",
         hoverbackgroundcolor: "green",
         hoverborderwidth: 2,
         hoverbordercolor: "#000",
         data: [this.props.spendings]
       }
     ]
   }
 };

you need to setstate of chartdata to something besides an empty array before you pass it as a prop.

score:2

firstly, in your spendsapp component you have never changed the value of the chartdata state. you change the number of the total and the other properties but you never change the value of the chartdata you pass.

you can have something like that

 //code....
  constructor(props) {
    super(props);

    this.state = {
      groceries: 10,
      shopping: 0,
      health: 0,
      houseneeds: 0,
      total: 0,
      chartdata: []
    }
 }



handlesubmit(e) {
   e.preventdefault();
   const { groceries, shopping, health, houseneeds } = this.state;

   const gsum = parseint(groceries, 10);
   const ssum = parseint(shopping, 10);
   const hsum = parseint(health, 10);
   const hnsum = parseint(houseneeds, 10);

  // chartdata array elements should be ordered as in your labels in the <billschart/>
  // labels: ["groceries", "shopping", "health", "house needs"] as you have it
  this.setstate({
      total: gsum + ssum + hsum + hnsum,
      chartdata: [gsum, ssum, hsum, hnsum] 
  });
}

also another thing is that instead of this:

<billchart spendings={[this.state.chartdata]} />

try this

<billchart spendings={this.state.chartdata} />

the reason for that is because, if you passed correctly the values in the array you will end up in with a two-dismentional array here data: [this.props.spendings] .

if you have already mounted your component you should use componentdidupdate() to change the state of the <billchart/>:

componentdidupdate(prevprops) {
  if (prevprops.spendings !== this.props.spendings) {
     let chartdata = this.state.chartdata;

     chartdata.datasets[0].data = this.props.spendings
     this.setstate({chartdata});
  }
}

Related Query

More Query from same tag