CODEWITHSUNDEEP
javascriptarraysreact-nativereact-native-ios
Brunaine
Brunaine

Reputation: 1236

React-native loop for return

I'm trying to have a normal loop just rendering some views but it just goes of 1 time, basically it renders hours and then I check with other function if the hour is the same as the hours on my array and if it is I return the title of the hour that was appointment.

This is a function that I use from react-native-calendars, I don't think that i can do it really different because i need to return the <View> on the function.

renderItem(item) {
  var cont = 0;
  for (i = 0; i <= 23; i++) { 
    return (
      <View style={[s.item, {height: item.height}]}>
        <View>
          <View style={{flexDirection: 'row',alignItems:'center'}}>
            <Text>{item.name}{i}:00  </Text>
            <View style={{borderBottomWidth: 1,flex:1,}}></View>
          </View>
          <TouchableOpacity style={{flexDirection: 'row',marginLeft: 35,borderColor: 'green',borderLeftWidth: 1,height: 50,backgroundColor:'#99ff99',opacity: 0.2}}>
            <Text style={{marginLeft: 10,color:'white',opacity: 1}}>{this._checkHour(i)}</Text>
          </TouchableOpacity>
        </View>
      </View>
    );       
  }
}

_checkHour(i){

 for (var k in GLOBAL.agenda){
   console.log(i);
   var horaDaLista = (GLOBAL.agenda[k] ? (GLOBAL.agenda[k].horaini ? GLOBAL.agenda[k].horaini.Hours : "") : ""   ) ;

   if(i==horaDaLista) {
     console.log(GLOBAL.agenda[k].titulo);
     return GLOBAL.agenda[k].titulo; 
   }
 }

}

Upvotes: 0

Views: 6312

Answers (1)

S&#233;rgio Reis
S&#233;rgio Reis

Reputation: 2523

Not entirely sure if something with the looks of this would work:

renderItem(item) {
  var cont = 0;
  var output=[];
  for (i = 0; i <= 23; i++) {
    var getHours =this._checkHour(i);
    var tempItem=  (
        <View key={i}>
          <View style={{flexDirection: 'row',alignItems:'center'}}>
            <Text>{i}:00  </Text>
            <View style={{borderBottomWidth: 1,flex:1,}}></View>
          </View>
          <TouchableOpacity style={{flexDirection: 'row',marginLeft: 35,borderColor: 'green',borderLeftWidth: 1,height: 50,backgroundColor:'#99ff99 ',}}>
            <Text style={{marginLeft: 10,color:'white',opacity: 1}}>{getHours}</Text>
          </TouchableOpacity>
        </View>
   );
    output[i] = (tempItem);

 }

 return(
    <View style={[s.item, {height: item.height}]}>
      {output}
    </View>
  );
}

The reason it doesnt work is because when the loop is executed once, it returns ( the function value ) and thus it exits before going all the way on the loop. The explanation for what I did is that I kept adding into an array of views and appended them all at the end on the single record. I also took the liberty of removing the first view tag from the loop and added it manually in the end because it doesn't seem to be the point of repeating that line. Stil, if it is, add it to the top part of the tempItem and remember to assign the key to that element and not the current one.

Upvotes: 2

Related Questions