Je dois retourner le code suivant dans ReactJS x quantité de fois. J'essaie de rensepuler une carte avec des noms basé sur le nombre de personnes qu'il y a dans une équipe.
Donc, si x était 5, j'aurais besoin de cela pour apparaître 5 fois. P>
<div className="row align-items-center justify-content-center m-b-10"> <h5>Name goes here</h5> </div>
3 Réponses :
En supposant que vous avez tous les noms de personnes dans un tableau. Vous pouvez utiliser (bien sûr, assurez-vous que ce code est enveloppé avec un autre élément) mappe sur la matrice lorsque le rendu`:
Je travaille avec un objet. J'ai joint une photo sur mon post original. J'ai pu résoudre le problème en utilisant une flèche et en poussant le
@ Legit98 Votre objet est un tableau. Donc, cela devrait fonctionner. Regarde mon édition :)
Premièrement, cela dépend de la manière dont vos données sont définies, par exemple, si les noms sont dans un tableau, vous pouvez créer un tableau d'éléments JSX contenant chacun, vous pouvez utiliser .MAP ()
Il suffit d'utiliser: Ce n'est pas idéal car vous pouvez également itération sur la gamme de noms elle-même et obtenir le même résultat, même plus propre. P> <div>
{
arrayOfNames.map((el, index) => (
<div className="row align-items-center justify-content-center m-b-10" key={index}>
<h5>`${el.first_name} ${el.last_name}`</h5>
</div>
))
}
</div>
Est-ce que cela répond à votre question? moyen le plus efficace de Rendu des éléments JSX lors de l'itération sur une éventail de données dans React