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
– Barry Michael Doyle, Commented Oct 18, 2018 at 8:54

Barry Michael Doyle · Accepted Answer · 2018-10-18 09:19:34Z

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, 2018 at 9:19

Barry Michael Doyle

10.8k33 gold badges98 silver badges161 bronze badges

answered Oct 18, 2018 at 8:57

Jee Mok

6,6068 gold badges54 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Barry Michael Doyle Over a year ago

Thanks, going to tweak you answer to match my problem better but this worked more reliably for me than the other solutions posted!

Jee Mok Over a year ago

@BarryMichaelDoyle glad it helps!

Roopak Puthenveettil · Accepted Answer · 2018-10-18 08:54:33Z

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, 2018 at 8:54

Roopak Puthenveettil

1,6052 gold badges15 silver badges28 bronze badges

1 Comment

HarryTheWulf Over a year ago

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.

Anurag Awasthi · Accepted Answer · 2018-10-18 09:22:30Z

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, 2018 at 9:22

answered Oct 18, 2018 at 8:52

Anurag Awasthi

6,2532 gold badges21 silver badges34 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related