Comment cacher certains éléments dans JSX

Question

Je souhaite afficher sur mon application une liste de «tags» de repas. Donc, basé sur le code ci-dessous, j'ai été capable de le faire. Donc, à la suite du code, je vais obtenir une liste ou un ensemble de mealTags affichés. Question: Je ne souhaite afficher que les 2 premiers tags, cachez le reste et placez un lien 'montrez plus où le reste apparaîtra quand je clique dessus. Comment puis-je faire cela dans ReactJS?

return (
    <View {...otherprops} style={styles.mainContainer} elevation={3}> 
    <View style={styles.contentContainer}> 
     <MealTagsSection mealTags={post.mealTags} /> 
    </View> 

---

type MealTagsProps = { 
    mealTags: Array<MealTag>; 
}; 

export function MealTagsSection(props: MealTagsProps) { 
    let {mealTags} = props; 

    return (
    <View style={styles.mealTagsContainer}> 
     { 
     mealTags.map((mealTag) => { 
      let tagStyle = ''; 
      if (mealTag.category === 1) { 
      tagStyle = styles.tag_healthy; 
      } else { 
      tagStyle = styles.tag_improve; 
      } 
      return (
      <View style={tagStyle}> 
       <Text style={styles.tagText}>{mealTag.description}</Text> 
      </View> 
     ); 
     }) 
     } 
    </View> 
); 
} 

Answer 1

Vous pouvez utiliser le nombre visible réglé en état

this.state= { 
    visibleCount:2 
} 

et utilisez la fonction de la tranche avant carte, par exemple

mealTags.slice(0, this.state.visibleCount).map(...) 

Ensuite, vous pouvez augmenter le nombre visible comme vous voulez dans le bouton onClick funtion.

Answer 2

Une autre option est de suivre l'index dans votre .map bloc

mealTags.map((mealTag, idx) => ... 

et le style en conséquence par exemple display:none lorsque idx> = 2