Data does not change using ternary operator on Linechart

Question

I want to render different data on my Line Chart Widget component depending on the user input. So I created a select tag:

<select id="lang" onChange={this.handleLineChart} value={this.state.value}>
          <option value="indiaData">All India</option>
          <option value="stateData">States</option>
</select>

constructor

constructor(props){
    super(props);
    this.state = {
      value: 'indiadata'
    }
   this.handleLineChart = this.handleLineChart.bind(this);
}

Onchange Event

    handleLineChart(event) {
      this.setState({value: event.target.value});
    }

My component

    {
        this.state.value === "indiaData" ? 
          <LineChartWidget data={indiaData} /> :
          <LineChartWidget data={stateData} />
    }

Both my data "indiaData" and "stateData" are arrays of objects and I am fetching 'em through API. By default, it works perfectly while rendering indiaData but when I change the input to States, it does not show any data on the line chart, though I can log it in my console (on change of input). There are no issues with the data.

Also, if I reverse my default state value to

     this.state = {
        value: 'statedata'
     }

and my component to exactly opposite

    {
        this.state.value === "stateData" ? 
          <LineChartWidget data={stateData} /> :
          <LineChartWidget data={indiaData} />
    }

Then, it will render stateData and not indiaData on changing the input.

There is one more scenario, so when my component looks something like this

    {
        this.state.value === "stateData" ? 
          <LineChartWidget data={stateData} /> :
          <div>Test</div>
    }

It works perfectly with the div but not with the second Linechart.

Shortly, my issue here is that it only renders the first condition and not the second one, keeping in mind that there is no issue with the data.

set breakpoint on this line `this.state.value === "indiaData" ? `, is it called after changing of input? what is value of `this.state.value`? — Igor Alemasow, Apr 23 '18 at 12:00
I can see state changing on user input. I can see data coming through. But it does not render the data on Line chart. Also edited the question. — Vinay Singh, Apr 23 '18 at 12:33
Post the relevant code and how it all relates to each other. Where is the ` — Evan Trimboli, Apr 23 '18 at 12:36

score 0 · Answer 1 · answered Apr 23 '18 at 12:01

0

Inside select tag, bind the scope using .bind(this)

<select id="lang" onChange={this.handleLineChart.bind(this)} value={this.state.value}>
      <option value="indiaData">All India</option>
      <option value="stateData">States</option>
</select>

answered Apr 23 '18 at 12:01

Mahipal

344
2
13

Sorry, I did not mention it in the question itself, but I have already binded my function in my constructor. I can see it working after logging this.state.value in my console. – Vinay Singh Apr 23 '18 at 12:21
Although, at first look, it seems like new data passed is same as previous data, but try to re-render LineChartWidget by setting state in `componentWillReceiveProps()` of LineChartWidget component – Mahipal Apr 23 '18 at 12:47

score 0 · Answer 2 · answered Apr 23 '18 at 12:06

0

Your function handleLineChart() doesn't have access to this. You can bind it correctly like so:

handleLineChart = (event) => {
  this.setState({value: event.target.value});
}

answered Apr 23 '18 at 12:06

Colin Ricardo

16,488
11
47
80

Already binded. Sorry did not mention in the question itself. – Vinay Singh Apr 23 '18 at 12:22
@VinaySingh well can you include your full code please? – Colin Ricardo Apr 23 '18 at 12:22
@VinaySingh it's not bound anywhere in the code you've posted. – Colin Ricardo Apr 23 '18 at 12:23
Updated the question. My apologies. – Vinay Singh Apr 23 '18 at 12:25

Data does not change using ternary operator on Linechart

2 Answers2