Cómo repetir un elemento n veces usando JSX y Lodash

3 minutos de lectura

Avatar de usuario de StillDead
Sigue muerto

Estoy usando React/JSX y Lodash en mi aplicación para lograr lo que quiero.

Necesito repetir un elemento una cierta cantidad de veces dependiendo de una condición. ¿Cómo debo hacer eso?

Aquí está el elemento:

<span className="busterCards">♦</span>;

Y lo estoy asignando así:

let card;
if (data.hand === '8 or more cards') {
  card = <span className="busterCards">♦</span>;
}

Entonces, en este caso, necesito repetir el elemento 8 veces. ¿Cuál debería ser el proceso usando Lodash?

  • Qué tal si new Array(8).join('<span className="busterCards">♦</span>');?

    – RAM

    9 dic 2015 a las 21:39

  • La solución que sugirió @Vohuman es una forma muy limpia de hacer el trabajo. No existe una función comparable definida dentro de la documentos de lodash.

    – dbeg

    9 dic 2015 a las 21:42

  • @Vohuman generaría una Cadena, mientras que OP quiere crear DOM usando la sintaxis JSX.

    – pata

    9 dic 2015 a las 21:45

  • @Vohuman es raro pero me están renderizando toda la cadena

    – Sigue muerto

    9 dic 2015 a las 21:47

  • @pawel tienes razón, ¿sabes cómo puedo hacerlo?

    – Sigue muerto

    9 dic 2015 a las 21:48

La forma más corta de hacer esto sin bibliotecas externas:

const n = 8; // Or something else

[...Array(n)].map((e, i) => <span className="busterCards" key={i}>♦</span>)

  • ¡Respuesta impresionante para usuarios que no son de lodash! Vale la pena señalar que requiere características de ES6 (aunque creo que está implícito al usar let en la pregunta de todos modos).

    – pseudovagabundeo

    14 de octubre de 2016 a las 2:09


  • Para aquellos que usan Typescript 2+, esto se compilará en Array(3).slice().map(...) que no consigue el mismo resultado. Consulte la respuesta de @Jian a continuación como reemplazo.

    – Pierre vDEV

    29 de enero de 2018 a las 14:23


  • Bien, mira mi respuesta que elabora más

    – vsync

    16 de julio de 2018 a las 11:15


  • ¿Por qué esto no puede ser simplemente Array(n).map((e, i) => <span className="busterCards" key={i}>♦</span>)

    –Kevin Wang

    04/06/2019 a las 21:30

  • @KevinWang porque su sugerencia creará un vacío matriz con una longitud de 8, en lugar de una matriz que consta de 8 elementos indefinidos. La iteración no funcionará en el primero. Tíralo a la consola para ver la diferencia.

    – Darbio

    13 de junio de 2019 a las 23:04


solución sin lodash o sintaxis de propagación ES6:

Array.apply(null, { length: 10 }).map((e, i) => (
  <span className="busterCards" key={i}>
    ♦
  </span>
));

  • Esto parece más limpio, pero con más iteraciones que alrededor de 126000 obtengo “Se excedió el tamaño máximo de la pila de llamadas” (al menos en el escritorio web de Chrome)

    – jave.web

    26 de febrero de 2022 a las 22:56


  • Me encontré con un compañero de trabajo que usaba este código, y usar Array.apply para repetir un número específico de veces no me resultó intuitivo a primera vista. Personalmente, consideraría otras soluciones más intuitivas primero si los futuros desarrolladores leerán su código.

    –Logan Cundiff

    11 de abril de 2022 a las 17:02


  • Lamento escuchar eso. La solución tiene como objetivo utilizar la menor cantidad de dependencias posible. Le sugiero a su compañero de trabajo que mejore la legibilidad convirtiéndola en una función reutilizable con un nombre sensato como times.

    – Weihang Jian

    12 de abril de 2022 a las 4:22

Avatar de usuario de Long Nguyen
largo nguyen

Aqui tienes:

let card = [];
_.times(8, () => {
  card.push(<span className="busterCards">♦</span>);
});

Es posible que desee agregar una clave a cada span elemento para que React no se queje por perder el atributo clave:

let card = [];
_.times(8, (i) => {
  card.push(<span className="busterCards" key={i}>♦</span>);
});

Para más información sobre .timesconsulte aquí: https://lodash.com/docs#times

  • Estoy tratando de asignar esto a la let cardpero no está repitiendo el elemento

    – Sigue muerto

    9 dic 2015 a las 21:54

  • O simplemente const card = _(8).times(idx => <span key=${idx} className="busterCards">♦</span>);

    – toklandia

    20 oct 2018 a las 10:46


  • También puede simplemente devolver _.times(…..) para representar los elementos. Asegúrese de usar también return () dentro también.

    – msqar

    10 de julio de 2019 a las 0:19

Avatar de usuario de Sandeep Amarnath
Sandeep Amarnath

Implementando esto sin Lodash

<section>
      {Array.from({ length: 10 }, (_, i) => <span key={i}>Your text</span>)}
 </section>

¿Como funciona esto?

Array.from() se usa en dos contextos:

  1. Creación de una matriz a partir de una estructura de datos similar a una matriz. Por ejemplo, podemos convertir un mapa en una matriz usando Array.from()

    const map = new Map([ [1, 2], [3, 4], [4, 5] ])

    console.log(Array.from(map)) //gives an array - [[1, 2], [3, 4], [4, 5]]

  2. Crear una matriz y completar los valores (Esto puede ser útil cuando necesitamos crear una matriz que contenga más elementos)

Array.from() acepta un objeto y una función de devolución de llamada.

Array.from({ length: 7 }, (() => 10)) // gives [10,10,10,10,10,10,10]

Podemos aprovechar el índice (segundo parámetro) dentro de la función de devolución de llamada para proporcionar elementos de matriz únicos

Array.from({ length: 4 }, ((_, i) => i + 1)) // [1,2,3,4]

Usando _.times: https://jsfiddle.net/v1baqwxv/

var Cards = React.createClass({
    render() {
        return <div>cards {
          _.times( this.props.count, () => <span>♦</span> )
        }</div>;
    }
});

Podrías hacerlo así (sin lodash):

var numberOfCards = 8; // or more.

if (data.hand >= numberOfCards) {
    var cards = [];

    for (var i = 0; i < numberOfCards; i++) {
        cards[i] = (<span className="busterCards">♦</span>);
    }
}

Avatar de usuario de PriyankMotivaras
PriyankMotivaras

Estoy usando esto y funciona para mí.

[...Array(10)].map((elementInArray, index) => ( 
    <div key={index}>
      Text in Loop
    </div>
))

¿Ha sido útil esta solución?