Filtrer la liste d'objets avec React

Question

Il pourrait s'agir d'un message clone, mais je n'ai trouvé aucune solution dans mon cas. J'ai une liste d'objets:

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'}
  ]
}

Je l'importe dans le composant, l'assigne à l'état et l'affiche dans le composant ci-dessous.

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) => {
      return(
        <tr key={player.name}>
          <td>{player.name}</td>
        </tr>
      );
    });
  }
  render(){
    return(
      <div className="col-sm-6 table-col table-responsive">
        <input
          type="text"
          value={this.state.player}
          onChange={this.onChange.bind(this)}
        />
        <table className="table table-striped">
          <thead>
            <tr>
              <th className="text-center">
                FC Barcelona
              </th>
            </tr>
          </thead>
          <tbody>
            {this.renderList()}
          </tbody>
        </table>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    players: state.reducerBarca
   };
};


export default connect(mapStateToProps)(Barca);

La liste ressemble à ça

Le problème est que je voudrais filtrer ma liste de joueurs en fonction de la valeur d'entrée. J'ai fait quelques recherches ici et je n'ai trouvé que le filtrage dans Array , pas comme dans la liste d'objets .

Ce que j'ai fait pour l'instant:

1. affichage de la liste des joueurs
2. Obtenir la valeur de l'entrée et l'afficher après chaque lettre écrite
3. Comment rendre ma liste par le terme entré ???

---

Merci à tous! J'ai supprimé l'état des joueurs

constructor(props){
    super(props);

    this.state = {
      //players: this.props.players <-- Stupid thing
      player: '' //empty to set as an input
    }
  }

et réécrire ma fonction renderList()

return this.props.players.filter(player =>
        player.name.toLowerCase().includes(this.state.player.toLowerCase())).map(searchedPlayers => {
          return(
            <tr key={searchedPlayers.name}>
              <td>{searchedPlayers.name}</td>
            </tr>
          );
        })
    }

Answer 1

Vous n'avez pas besoin d'utiliser l'état de copie pour les accessoires, vous pouvez également utiliser this.props.players.

getPlayers() {
  if(this.state.player) {
    return this.state.players.filter(player => player.name.includes(this.state.player))
  } else {
    return this.state.players
  }
}

Ensuite, vous pouvez appeler let collection = getPlayers(); et mapper les lecteurs au contenu html.