Loop in react-native

Question

I want to make a list of fields depending on the number of the player that user has selected  I wanted to make something like this   generatePaymentField         var noGuest   this state guest      var payment         lt View gt           lt View gt               lt View gt  lt Text gt No lt  Text gt  lt  View gt               lt View gt  lt Text gt Name lt  Text gt  lt  View gt               lt View gt  lt Text gt Preference lt  Text gt  lt  View gt           lt  View gt        for  var i 0  i  lt  noGuest  i              payment   payment                 lt View gt                   lt View gt                       lt TextInput   gt                   lt  View gt                   lt View gt                       lt TextInput   gt                   lt  View gt                   lt View gt                       lt TextInput   gt                   lt  View gt               lt  View gt             return payment     render          var payment   this generatePaymentField        this setState  payment   payment        return            lt View gt               this state payment           lt  View gt             But react-native regarded the syntax above as  unexpected token  pointing at the for loop line  Is there any other way I can achieve doing this

User · Answer

renderItem item          const width    80        var items            for let i   0  i  lt  item count  i              items push   lt View style    padding  10  borderBottomColor    f2f2f2   borderBottomWidth  10  flexDirection   row     gt       lt View style    width    gt         lt Text style  styles name  gt  item title  lt  Text gt         lt Text style    color    818181   paddingVertical  10    gt  item taskDataElements 0  description        lt  Text gt         lt Text style  styles begin  gt BEGIN lt  Text gt       lt  View gt        lt Text style    backgroundColor    fcefec   padding  10  color   red   height  40    gt  this msToTime item minTatTimestamp   lt   0    NOW    this msToTime item minTatTimestamp     hrs   lt  Text gt     lt  View gt           return items     render     return  this renderItem this props item

User · Answer

First of all  I recommend writing the item you want to render multiple times  in your case list of fields  as a separate component    function Field         return            lt View gt               lt View gt                   lt TextInput   gt               lt  View gt               lt View gt                   lt TextInput   gt               lt  View gt               lt View gt                   lt TextInput   gt               lt  View gt           lt  View gt             Then  in your case  when rendering based on some number and not a list  I d move the for loop outside of the render method for a more readable code     renderFields         const noGuest   this state guest      const fields           for  let i 0  i  lt  noGuest  i                 Try avoiding the use of index as a key  it has to be unique          fields push               lt Field key   guest   i    gt                       return fields     render          return            lt View gt               lt View gt                   lt View gt  lt Text gt No lt  Text gt  lt  View gt                   lt View gt  lt Text gt Name lt  Text gt  lt  View gt                   lt View gt  lt Text gt Preference lt  Text gt  lt  View gt               lt  View gt               this renderFields             lt  View gt             However  there are many more ways to render looped content in react native  Most of the ways are covered in this article  so please check it out if you re interested in more details  The examples in article are from React  but everything applies to React Native as well

User · Answer

render     var myloop        for  let i   0  i  lt  10  i        myloop push       lt View key  i  gt       lt Text gt  i  lt  Text gt       lt  View gt           return             lt View  gt             lt Text  gt Welcome to React Native  lt  Text gt              myloop           lt  View gt

User · Answer

You can create render the results  payments  and use a fancy way to iterate over items instead of adding a for loop    x000D   x000D  const noGuest   3  x000D   x000D  Array noGuest  fill noGuest  map guest   gt    x000D    console log guest   x000D      x000D   x000D   x000D    Example    renderPayments noGuest      return Array noGuest  fill noGuest  map  guess  index    gt        return         lt View key  index  gt           lt View gt  lt TextInput   gt  lt  View gt           lt View gt  lt TextInput   gt  lt  View gt           lt View gt  lt TextInput   gt  lt  View gt         lt  View gt                 Then use it where you want it  render       return       const   guest     this state                 this renderPayments guest            Hope you got the idea   If you want to understand this in simple Javascript check Array prototype fill

User · Answer

This should work   x000D   x000D  render    x000D   x000D   var payments       x000D   x000D   for let i   0  i  lt  noGuest  i     x000D   x000D    payments push  x000D      lt View key    i  gt  x000D       lt View gt  x000D        lt TextInput   gt  x000D       lt  View gt  x000D       lt View gt  x000D        lt TextInput   gt  x000D       lt  View gt  x000D       lt View gt  x000D        lt TextInput   gt  x000D       lt  View gt  x000D      lt  View gt  x000D      x000D     x000D    x000D   return   x000D     lt View gt  x000D      lt View gt  x000D       lt View gt  lt Text gt No lt  Text gt  lt  View gt  x000D       lt View gt  lt Text gt Name lt  Text gt  lt  View gt  x000D       lt View gt  lt Text gt Preference lt  Text gt  lt  View gt  x000D      lt  View gt  x000D   x000D       payments   x000D     lt  View gt  x000D     x000D    x000D   x000D   x000D

User · Answer

render         var myloop            for  let i   0  i  lt  10  i            myloop push           lt View key  i  gt           lt Text style    textAlign   center   marginTop  5     gt  i  lt  Text gt           lt  View gt                       return                 lt View  gt                 lt Text  gt Welcome to React Native  lt  Text gt                  myloop               lt  View gt                         Output 1 2 3 4 5 6 7 8 9

[react-native] Loop in react-native

Examples related to react-native