Salut à tous !

Je débute en react (typescript) et j'ai fais une petite formation sur Udemy, mais je me rend compte que je ne sais pas sélectionner des données.
J'ai en fait une liste de commentaires que j'affiche, et j'aimerais mettre un autre bloc qui m'affiche ceux qui ont la mention "favorite: true" uniquement.

Hors je ne sais pas du tout comment faire...
Voici mes données (sous forme de fichier .ts) et mon composant de favoris.

Si vous pouvez m'éclairer ce serait très gentil !

Salut, tu dois utiliser la methode filter pour filtrer ton tableau par rapport à une condition.

Ca peut etre une chose comme ca:

const filtered = data.filter(element=> element.favorite === true);

element peut etre le nom que tu veux, c'est juste pour représenter un élément de ton tableau, la methode va boucler sur tes données et verifier la condition sur chaque element, si c'est true, elle l'ajoute au tableau filtered.

NadfriJS a écrit:

Salut, tu dois utiliser la methode filter pour filtrer ton tableau par rapport à une condition.

Ca peut etre une chose comme ca:

const filtered = data.filter(element=> element.favorite === true);

element peut etre le nom que tu veux, c'est juste pour représenter un élément de ton tableau, la methode va boucler sur tes données et verifier la condition sur chaque element, si c'est true, elle l'ajoute au tableau filtered.

Je te remercie pour ta réponse.

EDIT :

Ok j'ai pu avancer un peu avec quelques recherches sur filter.
Cependant avec ce code :

          {favorites.filter(favorite => favorite.favorite === true).map(filteredFavorite => (
              <FavoriteCard key={filteredFavorite.id} filteredFavorite={filteredFavorite} />
            ))}

J'ai une erreur sur filteredFavorite={filteredFavorite}

J'ai bien compris comment ça focntionne maintenant la syntaxe je ne comprend pas, car du coup il me créer ceci :

    filter(arg0: (element: any) => boolean) {
      throw new Error('Method not implemented.');
    }

Meme en remplacant élément par le nom de ma props ça ne fonctionne pas..

Je précise que j'appelle mon composant dans un autre composant qui me les reunis tous

-
Edité par PouneyDisign 20 octobre 2021 à 16:27:20

Salut,

Ton code:

{favorites.filter(favorite => favorite.favorite === true).map(filteredFavorite => (
    <FavoriteCard key={filteredFavorite.id} filteredFavorite={filteredFavorite} />
  ))}

Me semble correcte d'un point de vue REACT, tu map sur ton tableau, et tu envoie l'objet en entier dans ton composant. Parcontre, n'ayant pas de connaissance en TYPESCRIPT, je ne pourrai pas t'aider sur ce genre de retour d'erreur.

Bonjour,

Sans avoir plus d'infos sur favorites, difficile de te dire ce qui ne vas pas. J'aurais tendance à dire que ce n'est pas un tableau, et qu'il ne possède pas de méthode filter. Ton compilateur étant "sympa", il créer une méthode qui throw une erreur. Est-ce que ce ne serais pas plutôt COMMENTS.filter(...) que tu souhaite faire ?

-
Edité par piero5673 1 octobre 2021 à 18:05:13