Problem in passing values using props in react.js while using chart.js

Question

I am using react js and trying to send Props from my app.js to chart.js file. When I send the hardcoded values the values are being send properly and graph is made according to it. But whenever I am passing a dynamic values, values are being passed but not used by chart.

App.js

 class App extends React.Component {

  state = {
    text: "",
    credit: [{_id:1,financeCredit:"loading"}],
    debit: [{_id:1,financeDebit:"loading"}],
   }

componentDidMount(){
    fetch('/data')
    .then(res=> res.json())
    .then(res2 => {
      console.log(res2)
      this.setState({
        credit: res2
      })
    })

    fetch('/data2')
    .then(res=> res.json())
    .then(res2 => {
      console.log(res2)
      this.setState({
        debit: res2
      })
    })

}

  render(){

var lengthExpense = this.state.credit.length;
console.log(lengthExpense)

var expName = [];

for (var a = 0 ; a <= lengthExpense ; a++){

if (this.state.credit[a]){
    expName.push(this.state.credit[a].expenseName)
}

}

var expAmount = [];

for (var b = 0 ; b <= lengthExpense ; b++){
    if(this.state.credit[b])
    expAmount.push(this.state.credit[b].expenseAmount)
}

console.log(expAmount)
console.log(expName)


    return (
      <BrowserRouter>
      <div className="App">   
      <Navbar />
      <Chart  expam = {expAmount} expnam = {expName} />
      <Route exact path = "/" component = {Home} />
      </div>
      </BrowserRouter>
  );
}

}

export default App;

Although the following console.log() is showing the desired values I want to pass

console.log(expAmount)
console.log(expName)

I am passing these values like this

<Chart  expam = {expAmount} expnam = {expName} />

In chart.js although I am getting these values.

Chart.js

class Chart extends Component{

    constructor(props){
        super(props);
        this.state = {
            chartData : {
                labels: this.props.expnam,
                datasets: [{
                    label: 'Expense',
                    data: this.props.expam,
                    backgroundColor:'rgba(255, 99, 132, 0.6)'
                }]
            }
        }
    }

    render(){

console.log(this.props)

        return(
            <div className = "chart">
                <div>
            <Bar id = "chart1"
            data={this.state.chartData}
            options={{ maintainAspectRatio: false, }}
            />  

            <canvas id = "chart1" height="30vw" width="10vw" ></canvas>
                </div>

            </div>
        )
    }
}

But couldn't able to pass it to to labels and data. Code is properly running but there is no values so chart is being showed empty

constructor(props){
        super(props);
        this.state = {
            chartData : {
                labels: this.props.expnam,
                datasets: [{
                    label: 'Expense',
                    data: this.props.expam,
                    backgroundColor:'rgba(255, 99, 132, 0.6)'
                }]
            }
        }
    }

In this chart.js file I can see all the values that are being passed from App.js. But these values are not been used for chart (bar chart).

console.log(this.props)

HoldOffHunger · Accepted Answer · 2020-02-21 20:49:38Z

1

It seems like you're setting the data in your constructor:

constructor(props){
    super(props);
    this.state = {
        chartData : {...}
    }
}

A constructor is only called once when an object is initialized. (In ReactJS, it is only called after the first render.)

You are calling setState(), and the rest appears to be good, that I can tell. Why don't you move this.state = {...} from the constructor to render()? Since render() runs whenever the state is changed, your setState() calls should work.

It may be inelegant, and there can certainly be improvements, but it will get you started in the right direction.

answered Feb 21, 2020 at 20:49

HoldOffHunger

21.3k11 gold badges123 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abdur Rehman Siddiqui Over a year ago

This works nicely, I just put this code under the render as you instructed and all things went well. Thanks a lot sir :)

Collectives™ on Stack Overflow

Problem in passing values using props in react.js while using chart.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related