How to repeat an element n times using JSX

javascript reactjs lodash
StillDead picture StillDead · Dec 9, 2015 · Viewed 51.8k times · Source

I am using React/JSX in my app in order to accomplish what I want, also, Lodash.

I need to repeat an element a certain amount of times depending on a condition. How should I do that?

Here is the element:

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

And I am assigning it like this:

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

So in this case, I need to repeat the element 8 times. What should be the process using Lodash?

Answer

Waiski picture Waiski · Sep 11, 2016

The shortest way to do this without any external libraries:

const n = 8; // Or something else

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

Related questions

Can't perform a React state update on an unmounted component

Problem I am writing an application in React and was unable to avoid a super common pitfall, which is calling setState(...) after componentWillUnmount(...). I looked very carefully at my code and tried to put some guarding clauses in place, but …

Read More
React Native: Using lodash debounce

I'm playing around with React Native and lodash's debounce. Using the following code only make it work like a delay and not a debounce. <Input onChangeText={(text) => { _.debounce(()=> console.log("debouncing"), 2000)() } /> I want the console to …

Read More
Lodash debounce not working in React

it would be best to first look at my code: import React, { Component } from 'react'; import _ from 'lodash'; import Services from 'Services'; // Webservice calls export default class componentName extends Component { constructor(props) { super(props); this.state = { value: this.props.value || …

Read More