title: reactjs onchange - conditional element rendering
body: <p>I'm trying to have a select option change one element of a component in ReactJS.</p>
  
  <p>The "Data____" are data objects that would be used for the linechart. However, under render 
  
  <p>My logic is this: </p>
  
  <p>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. </p>
  
  <p>The data object will then pass to the "data" element in LineTooltip as 
  "this.value"</p>
  
  <p>However, the error is that value is not defined, but I'm not sure what it means. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>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 (
        &lt;div className = "retentionlinetooltipchart"&gt;
         
          &lt;select value={this.state.value} onChange={this.handleChange} className = "yearrange"&gt;
            &lt;option value="Data2014"&gt;2014&lt;/option&gt;
            &lt;option value="Data2015"&gt;2015&lt;/option&gt;
            &lt;option value="Data2016"&gt;2016&lt;/option&gt;
            &lt;option value="Data2017"&gt;2017&lt;/option&gt;
          &lt;/select&gt;
  
          &lt;LineTooltip 
            title={title}
            data={this.value}
            width={width}
            height={height}
            chartSeries={chartSeries}
            x={x}
            /&gt;
  
        &lt;/div&gt;
      )
    }
  }</code></pre>
  </div>
  </div>
  </p>