CODEWITHSUNDEEP
reactjs
charb123
charb123

Reputation: 21

reactjs onchange - conditional element rendering

I'm trying to have a select option change one element of a component in ReactJS.

The "Data____" are data objects that would be used for the linechart. However, under render

My logic is this:

The select value has an onChange function that will call handleChange whenever a different year is selected. Once handleChange is called, it will run an if statement to see if the string is equivalent to the 4 options listed. Once it finds it, it sets "this.value" to the actual data object.

The data object will then pass to the "data" element in LineTooltip as "this.value"

However, the error is that value is not defined, but I'm not sure what it means. 

class SimpleLineChart extends Component{
  constructor(props) {
    super(props);
    this.state = {value: "Data2017"};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event){
    if (event.target.value == "Data2014"){
      this.value = Data2014;
    }
    else if (event.target.value == "Data2015") {
      this.value = Data2015;
    }
    else if (event.target.value == "Data2016") {
      this.value = Data2016;
    }
    else {
      this.value = Data2017;
    }

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

  render() {
    return (
      <div className = "retentionlinetooltipchart">
       
        <select value={this.state.value} onChange={this.handleChange} className = "yearrange">
          <option value="Data2014">2014</option>
          <option value="Data2015">2015</option>
          <option value="Data2016">2016</option>
          <option value="Data2017">2017</option>
        </select>

        <LineTooltip 
          title={title}
          data={this.value}
          width={width}
          height={height}
          chartSeries={chartSeries}
          x={x}
          />

      </div>
    )
  }
}

Upvotes: 2

Views: 8452

Answers (1)

Hevar
Hevar

Reputation: 1529

You have to update this.state by setting the new value. And you dont need all those ifs.´

Your handleChange() will recive the new value. And since it's a <select> the only values passed will be those specified in your options.

So this is all you need:

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

Your complete code:

class SimpleLineChart extends Component{
  constructor(props) {
    super(props);
    this.state = {value: "Data2017"};
    this.handleChange = this.handleChange.bind(this);
  }

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

  render() {
    return (
      <div className = "retentionlinetooltipchart">

        <select value={this.state.value} onChange={this.handleChange} className = "yearrange">
          <option value="Data2014">2014</option>
          <option value="Data2015">2015</option>
          <option value="Data2016">2016</option>
          <option value="Data2017">2017</option>
        </select>

        <LineTooltip 
          title={title}
          data={this.value}
          width={width}
          height={height}
          chartSeries={chartSeries}
          x={x}
          />

      </div>
    )
  }
}

Upvotes: 2

Related Questions