title: Filtering object list with React
body: <p>It could be a clone post but I did not find any solution for in my case. I have list of an objects:</p>
  
  <pre><code>export default function() {
    return [
      {name: 'Mark Teer Stegen'},
      {name: 'Nelson Semedo'},
      {name: 'Gerrard Pique'},
      {name: 'Ivan Rakitic'},
      {name: 'Sergio Busquets'},
      {name: 'Denis Suarez'},
      {name: 'Coutinho'},
      {name: 'Luis Suarez'},
      {name: 'Lionel Messi'},
      {name: 'Dembele'},
      {name: 'Malcom'}
    ]
  }
  </code></pre>
  
  <p>I import it to the component, assign to the state and displaying it in the component below.</p>
  
  <pre><code>import React, {Component} from 'react';
  import {connect} from 'react-redux';
  
  class Barca extends Component{
    constructor(props){
      super(props);
  
      this.state = {
        players: this.props.players,
        player: '' //empty to set as an input
      }
    }
  
    onChange(e){
      this.setState({
        player: e.target.value
      });
      console.log(this.state.player);
    }
    renderList(){
      return this.state.players.map((player) =&gt; {
        return(
          &lt;tr key={player.name}&gt;
            &lt;td&gt;{player.name}&lt;/td&gt;
          &lt;/tr&gt;
        );
      });
    }
    render(){
      return(
        &lt;div className="col-sm-6 table-col table-responsive"&gt;
          &lt;input
            type="text"
            value={this.state.player}
            onChange={this.onChange.bind(this)}
          /&gt;
          &lt;table className="table table-striped"&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th className="text-center"&gt;
                  FC Barcelona
                &lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              {this.renderList()}
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const mapStateToProps = (state) =&gt; {
    return {
      players: state.reducerBarca
     };
  };
  
  
  export default connect(mapStateToProps)(Barca);
  </code></pre>
  
  <p>List looks like that</p>
  
  <p><a href="https://i.stack.imgur.com/J1Rrd.png" rel="noreferrer"><img src="https://i.stack.imgur.com/J1Rrd.png" alt="list view"></a></p>
  
  <p>The problem is that I would like to filter my players list by the value from input. I have done some research here and I have only found filtering in <strong>Array</strong>, not like I have in <strong>Objects list</strong>.</p>
  
  <p>What I have done for now:</p>
  
  <ol>
  <li>displaying the players list</li>
  <li>Geting the value from the input and displaying it after every written letter</li>
  <li>How to render my list by the inputted term ???</li>
  </ol>
  
  <hr>
  
  <p>Thank you all people ! I have removed the players state </p>
  
  <pre><code>constructor(props){
      super(props);
  
      this.state = {
        //players: this.props.players &lt;-- Stupid thing
        player: '' //empty to set as an input
      }
    }
  </code></pre>
  
  <p>and rewrite my <code>renderList()</code> function</p>
  
  <pre><code>return this.props.players.filter(player =&gt;
          player.name.toLowerCase().includes(this.state.player.toLowerCase())).map(searchedPlayers =&gt; {
            return(
              &lt;tr key={searchedPlayers.name}&gt;
                &lt;td&gt;{searchedPlayers.name}&lt;/td&gt;
              &lt;/tr&gt;
            );
          })
      }
  </code></pre>