React Native - For Loop components

Question

I try to for loop numbers of components, but it seem didn't work. I setState the totalitem to 5, and the output components only have 1.

_renderSomeItems(){
  for(var i = 0; i < this.state.totalitem; i++){
    return(
      <SpecialItem key={i} />
    );
  }      
}

Possible duplicate of [Does return stop a loop?](https://stackoverflow.com/questions/11714503/does-return-stop-a-loop) — bennygenel, Oct 16 '17 at 07:53

score 1 · Accepted Answer · answered Oct 16 '17 at 07:55

1

return inside a for loop will end the loop. You should use Array.prototype.map(). Don't forget to return result of map.

_renderSomeItems(){
  // considering this.state.totalitem is to be an array
  return this.state.totalitem.map((item, index) => {
    return(
      <SpecialItem key={index} />
    );
  }      
}

// or

_renderSomeItems(){
  const results = [];
  for(var i = 0; i < this.state.totalitem; i++){
    results.push(<SpecialItem key={i} />);
  }
  return results;
}

answered Oct 16 '17 at 07:55

bennygenel

23,896
6
65
78

thanks for reply, `this.state.totalitem` is just a number. I mentioned in my question that i `setState` it to `5` – FeelRightz Oct 16 '17 at 08:03
1

Then second version is a better option for you. That is why I added the comment on first one – bennygenel Oct 16 '17 at 08:05

score 0 · Answer 2 · answered Oct 16 '17 at 07:54

0

Using lodash

import _ from 'lodash'

_renderSomeItems(){
  return _.range(this.state.totalitem).map(item, index) => (
    <SpecialItem key={i} />
  );
}

answered Oct 16 '17 at 07:54

klugjo

19,422
8
57
75

React Native - For Loop components

2 Answers2