Render multiple elements based on a number rather than mapping through an array

Question

I'm familair with mapping through and array to render something for each number in an array. But what is an effective way to accomplish the same thing using a number.

I've found myself in a situation where I have an integer representing number of pages and a component <Page> which takes the prop pageNumber.

I've got the following render function in place:

renderPages() {
  for (let i = 1; i < this.state.numPages; i++) {
    return <Page pageNumber={1} />;
  }
}

The renderPages function is implemented as follows in my class render function:

render() {
  return (
    <div>
      {this.renderPages()}
    </div>
  );
}

I understand that once the first return occures the renderPages is exited. So in the end it only renders the first page. How can I render more pages here?

Ah right, good approach. I was thinking of that I wasn't sure whether or not it'd be the best solution :) — Barry Michael Doyle, Oct 18 '18 at 08:54

Anurag Awasthi · Answer 1 · 2018-10-18T09:22:30.483

1

Append to an array and then return the array.

renderPages() {
    const arr = []
  for (let i = 1; i <-this.state.numPages; i++) {
    arr.push(<Page pageNumber={1} />)
  }
    return arr
}

or you can do this without using a function by creating an empty array,

render() {
  return (
    <div>
      {(new Array(this.state.numPages)).map((item, i)=><Page pageNumber={i} />)}
    </div>
  );
}

edited Oct 18 '18 at 09:22

answered Oct 18 '18 at 08:52

Anurag Awasthi

6,115
2
18
32

score 1 · Answer 2 · answered Oct 18 '18 at 08:54

1

renderPages() {
    const arr = []
  for (let i = 1; i <-this.state.numPages; i++) {
    arr.push(<Page pageNumber={1} />)
  }
    return arr
}

render() {
  return (
    <div>
      {this.renderPages().map((item)=>(item))}
    </div>
  );
}

answered Oct 18 '18 at 08:54

Roopak Puthenveettil

1,387
2
13
27

1

It might be a good idea to explain what this code does. Whilst it is useful to have the code, the OP (and everyone else) would benefit from an explanation. – JustCarty Oct 18 '18 at 09:53

score 1 · Accepted Answer · edited Oct 18 '18 at 09:19

1

Just another preferences (shorter version):

https://stackoverflow.com/a/51335795/9206753 (my previous answer)

To loop for a number of times and return, you can achieve it with the help of from and map:

  <div>
    {Array.from(Array(this.state.numPages)).map((item, index) =>
      <Page key={index} pageNumber={index + 1} />
    )}
  </div>

Hope it helps

edited Oct 18 '18 at 09:19

Barry Michael Doyle

9,333
30
83
143

answered Oct 18 '18 at 08:57

Jee Mok

6,157
8
47
80

1

Thanks, going to tweak you answer to match my problem better but this worked more reliably for me than the other solutions posted! – Barry Michael Doyle Oct 18 '18 at 09:17
1

@BarryMichaelDoyle glad it helps! – Jee Mok Oct 19 '18 at 00:01

Render multiple elements based on a number rather than mapping through an array

3 Answers3