title: Sorting and filtering in react
body: <p>In the following code block, I want to perform sorting and filtering according to the panels I have defined on top. User can select sorting criteria and order to sort the data. User can select the criteria and related values to get the filtered results. Note: first I want to pull dynamic drop down according to the selected criteria while filtering.</p>
  
  <pre><code>class StudentRow extends React.Component {
    render() {
      const student = this.props.student;
  
      return (
        &lt;tr&gt;
          &lt;td&gt;{student.ID}&lt;/td&gt;
          &lt;td&gt;{student.Name}&lt;/td&gt;
          &lt;td&gt;{student.Age}&lt;/td&gt;
          &lt;td&gt;{student.Major}&lt;/td&gt;
          &lt;td&gt;{student.College}&lt;/td&gt;
        &lt;/tr&gt;
      );
    }
  }
  
  class DropDown extends React.Component {
    constructor(props) {
      super(props);
      this.state = {criteria: 'id', order: 'ascending'};
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event) {
      this.setState({ [event.target.name]: event.target.value });
    }
  
    handleSubmit(event) {
      alert('Your cretiria is: ' + this.state.criteria + ' Order is: ' + this.state.order);
      event.preventDefault();
    }
  
    render() {
      return (
        &lt;form onSubmit={this.handleSubmit}&gt;
  
          &lt;label&gt;
            Cretiria to sort:
            &lt;select value={this.state.criteria} name="criteria" onChange={this.handleChange}&gt;
              &lt;option value="id"&gt;ID    &lt;/option&gt;
              &lt;option value="name"&gt;Name  &lt;/option&gt;
              &lt;option value="age"&gt;Age   &lt;/option&gt;
              &lt;option value="major"&gt;Major &lt;/option&gt;
              &lt;option value="college"&gt;College&lt;/option&gt;
            &lt;/select&gt;
          &lt;/label&gt;
  
          &lt;label&gt;
            Order of sorting:
            &lt;select value={this.state.order} name="order" onChange={this.handleChange}&gt;
              &lt;option value="ascending"&gt;Ascending&lt;/option&gt;
              &lt;option value="descending"&gt;Descending&lt;/option&gt;
            &lt;/select&gt;
          &lt;/label&gt;
  
          &lt;input type="submit" value="Submit" /&gt;
        &lt;/form&gt;
      );
    }
  }
  
  
  class Filter extends React.Component {
    constructor(props) {
      super(props);
      this.state = {criteria: 'id', value: ''};
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event) {
      this.setState({ [event.target.name]: event.target.value });
    }
  
    handleSubmit(event) {
      alert('Your cretiria is: ' + this.state.criteria + ' Value is: ' + this.state.value);
      event.preventDefault();
    }
  
    render() {
      return (
        &lt;form onSubmit={this.handleSubmit}&gt;
  
          &lt;label&gt;
            Cretiria to filter:
            &lt;select value={this.state.criteria} name="criteria" onChange={this.handleChange}&gt;
              &lt;option value="id"&gt;ID    &lt;/option&gt;
              &lt;option value="name"&gt;Name  &lt;/option&gt;
              &lt;option value="age"&gt;Age   &lt;/option&gt;
              &lt;option value="major"&gt;Major &lt;/option&gt;
              &lt;option value="college"&gt;College&lt;/option&gt;
            &lt;/select&gt;
          &lt;/label&gt;
  
          &lt;label&gt;
            Value to filer:
            &lt;select value={this.state.value} name="value" onChange={this.handleChange}&gt;
              // Need dynamic values here
            &lt;/select&gt;
          &lt;/label&gt;
  
          &lt;input type="submit" value="Submit" /&gt;
        &lt;/form&gt;
      );
    }
  }
  </code></pre>