title: Filter table data on dropdown selection React
body: <p>I have created a table which is already populated by some data. Now I want to filter the results in the table based on a selection in a dropdown value. How Could I do this in React? Can someone guide or provide a sample code to showcase the result?</p>
  
  <p>Below is my code sample:</p>
  
  <p>Dropdown:</p>
  
  <pre><code> &lt;table&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt; &lt;td&gt;
                          &lt;label className="col-form-label"&gt; Auditee &lt;/label&gt; &lt;/td&gt;
                          &lt;td className="td-padding td-space"&gt;
                              &lt;select className="form-control dpwidth" onChange={this.optionSelected.bind(this)}&gt;
                              &lt;option&gt;Select&lt;/option&gt;
                              {this.renderAuditee()}
                              &lt;/select&gt;
                          &lt;/td&gt;
  
                          &lt;td&gt; &lt;label className="col-form-label lbl-space"&gt; SME &lt;/label&gt;&lt;/td&gt;
                          &lt;td className="td-padding"&gt;
                              &lt;select className="form-control dpwidth" onChange={this.optionSelected.bind(this)}&gt;
                              &lt;option&gt;Select&lt;/option&gt;
                              {this.renderSME()}
                              &lt;/select&gt;
                          &lt;/td&gt;
  
                          &lt;td&gt; &lt;label className="col-form-label lbl-space"&gt; Year &lt;/label&gt;&lt;/td&gt;
                          &lt;td className="td-padding"&gt;
                              &lt;select className="form-control dpwidth" name="Year" onChange={this.handlePeriodChange.bind(this,this)} disabled={this.state.isChecked}&gt;
                              &lt;option&gt;Select&lt;/option&gt;
                              {this.renderYear()}
                              &lt;/select&gt;
                          &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Data in Table:</p>
  
  <pre><code>  &lt;table className="table table-striped table-highlight"&gt;
              &lt;span className="head"&gt;Review2&lt;/span&gt;
            &lt;tbody&gt;
            &lt;tr&gt;
              &lt;th&gt; Project ID &lt;/th&gt;
              &lt;th&gt; Project Name &lt;/th&gt;
              &lt;th&gt; SME &lt;/th&gt;
              &lt;th&gt; Auditor &lt;/th&gt;
              &lt;th&gt; EEECPM&lt;/th&gt;
              &lt;th&gt; WorldArea &lt;/th&gt;
              &lt;th&gt; Country &lt;/th&gt;
              &lt;th&gt; FY Year &lt;/th&gt;
              &lt;th&gt; FY Period &lt;/th&gt;
              &lt;th&gt; Review1 Date &lt;/th&gt;
              &lt;th&gt; No. of Obs. &lt;/th&gt;
              &lt;th&gt; Total Recom. &lt;/th&gt;
              &lt;th&gt; Accepted Recom.&lt;/th&gt;
              &lt;/tr&gt;
               {
                 filteredData.length? this.renderTableData(filteredData) : this.renderTableData(data) 
               }
            &lt;/tbody&gt;
          &lt;/table&gt;
  </code></pre>