React component updates after 2 onSubmit clicks

Question

I have a chart component that will update on the first click of onSubmit when I enter data into a form but once but when I enter data again it then needs 2 clicks in order for the chart to update. I have a DataVars component which contains the form, adds the input to props and then renders the chart component Charter

import React, {Component} from 'react'
import Charter from './Charter'

class DataVars extends Component{
    constructor() {
        super();
        this.state = {
            interest_rate:'0.5',
        }
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    handleSubmit(event){
        event.preventDefault();
        this.setState({
             interest_rate: this.element.value
         },
        () => { console.log("setState completed", this.state) });
    }

    render(){
        return(
        <div>
            <Charter interest_rate={this.state.interest_rate}/>

            <form onSubmit={this.handleSubmit}>
                <input type="text" name="interest_rate" ref={el => this.element = el} />
                <input type="submit" value="Submit" />
            </form>
        </div>

    );
    }
}

export default DataVars


//Charter.js
import React, {Component} from 'react';
import { Line } from 'react-chartjs-2';
import Chart from 'chart.js';

var data = {
  labels: ["Year 1", "Year 2", "Year 3", "Year 4", "Year 5", "Year 6","Year 7","Year 8","Year 9","Year 10"],
  datasets: [
    {
      label: "First dataset",
      data: [],
      fill: false,
      backgroundColor: "rgba(75,192,192,0.2)",
      borderColor: "rgba(75,192,192,1)"
    }
  ]
};

export default class LineDemo extends Component {

  componentDidMount(){
      var initial_value =10
      data.datasets[0].data = this.compoundList(initial_value)
      console.log(data.datasets[0].data[0])
      let lineChart = this.reference.chartInstance
      lineChart.update();
  }

  componentDidUpdate(){
      var initial_value =10
      data.datasets[0].data = this.compoundList(initial_value)
      console.log(data.datasets[0].data[0])
      let lineChart = this.reference.chartInstance
      lineChart.update();
  }

  compoundList(initial_value){
    var current_value =initial_value
    const interest_rate = this.props.interest_rate
    var compoundList =[];

    for (var i =0; i < 10; i++){
      current_value = this.calculateCompound(current_value, interest_rate)
      compoundList.push(current_value);
    }
    return compoundList;
  }

  calculateCompound(current_value, interest_rate){
    return current_value + (current_value * interest_rate)
  }

render(){
  return (
      <div>
        <Line data={data} ref={(reference) => this.reference = reference}/>
        <h1>Interest Rate: {this.props.interest_rate}</h1>
      </div>
    );
  }


}

I tried to trigger a console log command after setState but i still get the same problem. Is there a way to only render the Charter component once the state is updated rather than asynchronously perhaps?

Thanks for your input.

Answer 1

Altenatively, you can store data in state and let Line re-render on state change instead of updating manually,

// charter.js
import React, { Component } from "react";
import { Line } from "react-chartjs-2";
import Chart from "chart.js";

// var data = {
//   labels: [
//     "Year 1",
//     "Year 2",
//     "Year 3",
//     "Year 4",
//     "Year 5",
//     "Year 6",
//     "Year 7",
//     "Year 8",
//     "Year 9",
//     "Year 10"
//   ],
//   datasets: [
//     {
//       label: "First dataset",
//       data: [],
//       fill: false,
//       backgroundColor: "rgba(75,192,192,0.2)",
//       borderColor: "rgba(75,192,192,1)"
//     }
//   ]
// };

export default class Charter extends Component {
  state = {
    data: {
      labels: [
        "Year 1",
        "Year 2",
        "Year 3",
        "Year 4",
        "Year 5",
        "Year 6",
        "Year 7",
        "Year 8",
        "Year 9",
        "Year 10"
      ],
      datasets: [
        {
          label: "First dataset",
          data: [],
          fill: false,
          backgroundColor: "rgba(75,192,192,0.2)",
          borderColor: "rgba(75,192,192,1)"
        }
      ]
    }
  };
  componentDidMount() {
    var initial_value = 10;
    let data = this.state.data;

    data.datasets[0].data = this.compoundList(initial_value);
    console.log(data.datasets[0].data[0]);
    let lineChart = this.reference.chartInstance;
    lineChart.update();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.interest_rate !== this.props.interest_rate) {
      var initial_value = 10;
      let data = this.state.data;
      data.datasets[0].data = this.compoundList(initial_value);
      console.log(data.datasets[0].data[0]);
      // let lineChart = this.reference.chartInstance;
      // lineChart.update();
      this.setState({ ...data });
    }
  }

  compoundList(initial_value) {
    var current_value = initial_value;
    const interest_rate = this.props.interest_rate;
    var compoundList = [];
    console.log("+++ called +++");

    for (var i = 0; i < 10; i++) {
      current_value = this.calculateCompound(current_value, interest_rate);
      compoundList.push(current_value);
    }
    return compoundList;
  }

  calculateCompound(current_value, interest_rate) {
    return current_value + current_value * interest_rate;
  }

  render() {
    return (
      <div>
        <Line
          data={this.state.data}
          ref={reference => (this.reference = reference)}
        />
        <h1>Interest Rate: {this.props.interest_rate}</h1>
      </div>
    );
  }

}

Answer 2

Manage to solve it

this.reference = reference} width={5} height={1} redraw/>

You need to add redraw