Sorting And Filtering In React

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. Use

Solution 1:

const filtereData = data.filter(item => item.value === valuetofilter);

  <label>
    Value to filer:
    <select value={this.state.value} name="value" onChange={this.handleChange}>
      {filteredData.map(item => <option value={item.value}> {item.value} </option>}
    </select>
  </label>

replace item.value with the value from the data you want to use to compare. Then valuetofilter is the value from the state that the user queried. If it matches a new option element will be returned into the select.