title: How to apply filter on table contents in react
body: <p><a href="https://i.stack.imgur.com/PpxVX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PpxVX.png" alt="enter image description here"></a>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  
  import {Doughnut} from "react-chartjs-2"
  
  import {bindActionCreators} from "redux";
  import {connect} from 'react-redux';
  
  import {fetchBeacons} from '../actions/';
  
  const DummyDoughnutData = {
    labels: ['beacon 1 - zone a', 'beacon 2 - zone c', 'beacon 3 - zone a', 'beacon 4 - zone b', 'beacon 5 - zone b'],
    datasets: [
      {
        borderColor: 'rgba(255,255,255,.55)',
        data: [ 30, 9, 17, 22, 11],
        backgroundColor: [
    '#063e70',
    '#107bb5',
    '#1A1C1D',
    '#666666',
    '#2F4F4F'
  
    ]
      }
    ],
  };
  
  
  // const beacons=[
  //         {zone:"zone a", status: "active", _id:1},
  //         {zone:"zone c", status: "active", _id:2},
  //         {zone:"zone a", status: "active", _id:3},
  //         {zone:"zone b", status: "active", _id:4},
  //         {zone:"zone b", status: "active", _id:5},
  //         {zone:"zone b", status: "active", _id:6},
  //         {zone:"zone c", status: "active", _id:7}
  // ];
  
  // class BeaconZoneRow extends Component {
  //     render() {
  //         return (
  //             &lt;tr&gt;
  //                 &lt;th colSpan="2"&gt;
  //                     {this.props.zone}
  //                 &lt;/th&gt;
  //             &lt;/tr&gt;
  //         )
  
  //     }
  
  // }
  
  class BeaconRow extends Component {
      render() {
          return (
              &lt;tr&gt;
                   &lt;td&gt;{this.props.beacon.name}&lt;/td&gt;
                  &lt;td&gt;{JSON.stringify(this.props.beacon.status)}&lt;/td&gt;
                  &lt;td&gt; {this.props.beacon.zone.name} &lt;/td&gt;
              &lt;/tr&gt;
          )
      }
  }
  
  class BeaconList extends Component {
  
      // Sort = (prop) =&gt; { return (a,b) =&gt; a[prop].localeCompare(b[prop])};
  
      render() {
          const rows = [];
  
          this.props.beacons.map( beacon =&gt; {
              return rows.push(&lt;BeaconRow beacon={beacon} key={beacon._id}/&gt;)
          });
  
          return (
              &lt;div className="col-lg-6"&gt;
                  &lt;table className="table"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;Name&lt;/th&gt;
                              &lt;th&gt;Status&lt;/th&gt;
                              &lt;th&gt;Zone&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          {rows}
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          )
  
  
      }
  }
  
  class BeaconDoughnutAnalysis extends Component {
      render() {
          return (
              &lt;div className="col-lg-6"&gt;
                  &lt;Doughnut data={DummyDoughnutData} /&gt;
                  &lt;br/&gt;
                  &lt;center&gt;visits&lt;/center&gt;
              &lt;/div&gt;
          )
      }
  }
  
  
  class BeaconListComponent extends Component {
    constructor(props) {
      super(props);
      this.handleSubmit = this.handleSubmit.bind(this)
    }
  
    handleSubmit(){
      this.props.router.push('/new-beacon');
    }
  
    componentWillMount = () =&gt; {
          this.props.fetchBeacons();
      };
  
  
      render() {
          return (
              &lt;div&gt;
                  &lt;div className="row"&gt;
                      &lt;div className="col-sm-5"&gt;
                          &lt;button className="btn btn-sm btn-info" onClick={this.handleSubmit}&gt; Add Beacon&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;br/&gt;
                  { this.props.beacons &amp;&amp; this.props.beacons.length &gt; 0 ?
                      &lt;div className="row"&gt;
                          &lt;BeaconList beacons={this.props.beacons}/&gt;
                          &lt;BeaconDoughnutAnalysis/&gt;
                      &lt;/div&gt; :
                      &lt;center&gt;&lt;h1&gt;...Loading&lt;/h1&gt;&lt;/center&gt;
                  }
              &lt;/div&gt;
          )
      }
  }
  
  function mapStateToProps(state) {
      return {
          beacons: state.beacons
      }
  }
  
  
  function matchDispatchToProps(dispatch){
      return bindActionCreators({fetchBeacons: fetchBeacons}, dispatch);
  }
  
  export default connect(mapStateToProps, matchDispatchToProps)(BeaconListComponent);</code></pre>
  </div>
  </div>
  </p>
  
  <p>i had fetched data from the server and i wanted to know how to filter that data in the table using react redux
  the code is shown above using which table is being displayed and i wanted to filter its contents</p>