React-native loop for return

Question

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; 
   }
 }

}

Sérgio Reis · Accepted Answer · 2017-05-24 12:38:54Z

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.

Collectives™ on Stack Overflow

React-native loop for return

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related