Quiero mostrar en mi aplicación una lista de 'etiquetas' de comida. Entonces, según el código a continuación, pude hacer eso. Entonces, como resultado del código, veré una lista o un conjunto de etiquetas de comida.

Pregunta: Solo quiero mostrar las primeras 2 etiquetas, ocultar el resto y poner un enlace 'mostrar más dónde aparecerá el resto cuando haga clic en él. ¿Cómo puedo hacer esto en 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>
  );
}
1
Zhen 25 may. 2017 a las 11:10

2 respuestas

La mejor respuesta

Puede usar establecer conteo visible en estado

this.state= {
   visibleCount:2
}

Y usar la función de corte antes del mapa, por ejemplo

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

Luego puede aumentar el recuento visible como desee en el botón de la función Hacer clic.

1
Abhishek 25 may. 2017 a las 08:31

Otra opción es rastrear el índice en su bloque .map

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

Y estilo en consecuencia, p. display:none cuando idx> = 2

0
pscl 31 may. 2017 a las 09:39