I need to make a loop from 1 to 100 in scrollview But i cant

Question

This is the code but I cant write 1 to 100 like that so I need a loop but there are some errors about which I don't know anything I don't know how to resolve this issue. Help me to get through this...

<ScrollView
        vertical={true}
        style={styles.scroller}
        showsHorizontalScrollIndicator={true}
        showsVerticalScrollIndicator={true}>
          
        
        <Text style={styles.welcome}> 1</Text>
        <Text style={styles.welcome}> 2</Text>
        <Text style={styles.welcome}> 3</Text>
        <Text style={styles.welcome}> 4</Text>
        <Text style={styles.welcome}> 5</Text>
        <Text style={styles.welcome}> 6</Text>
        <Text style={styles.welcome}> 7</Text>
        <Text style={styles.welcome}> 8</Text>
        <Text style={styles.welcome}> 9</Text>
        <Text style={styles.welcome}> 10</Text>
      </ScrollView>

The above code is working but, If I use for loop instead of this 'Text' thing I get the error.

for (let i = 0; i < 100; i++) {
      <Text>{i}</Text>

Error on the number '100' it says: Identifier expected.

Answer 1

For a larger data set it is advised to use a FlatList in react-native. This is done relatively easy by introducing a state that holds the data.

Here is a minimal example.

const FlatListExample = (props) => {

   // prefill the state with 100 objects
   const [data, setData] = useState(Array(100).fill().map((_, i) => i+1))

   return (
       <FlatList 
          data={data}
          keyExtractor={(item) => item.toString()}
          renderItem={({item, index}) => {
             return <Text style={styles.welcome}>{item}</Text>
          }}
         />
   )
}

A FlatList is a convenient wrapper around ScrollView and is generally speaking the better choice for larger data sets when it comes to performance.

If you still want to use a ScrollView, then you can just use the map function as follows.

const data = useMemo(() => Array(100).fill().map((_, i) => i+1), [])

<ScrollView
        style={styles.scroller}>
        
        {
             data.map(i => <Text style={styles.welcome}>{i}</Text>)
        }
      </ScrollView>