For loop inside Scrollview

Question

I try to run the create new feature as many times as the size of my array is, unfortunately I fail.

Main element code

return (
      <View
        style={{
          flex: 1,
          alignContent: "center",
          alignItems: "center",
        }}
      >
        <Text
          style={{
            fontSize: 20,
            margin: 30,
            color: colors.darkGray,
          }}
        >
          ──────── Skanowane kody ────────
        </Text>
        <ScrollView>
         
        {newHistoryScan(images.qr_test, text[0])}

        </ScrollView>
      </View>
    );
  }

A function that renders the next item

function newHistoryScan(image, result) {

  return (
    <View
      style={{
        alignItems: "center",
      }}
    >
      <Image
        source={image}
        resizeMode="contain"
        style={{
          width: 350,
          height: 150,
        }}
      />
      <TouchableOpacity
        onPress={() => {checkResult(result)}}
        >
        <Text
          style={{
            color: 'blue',
            fontSize: 20,
            marginTop: 10,
            marginBottom: 40,
          }}
        >
          {result}
        </Text>
        </TouchableOpacity>
    </View>
  );
}

So, I made a function that works, it displays all the items from the array, unfortunately when I call the newHistoryScan function, the screen on the phone remains white, the items do not appear.

function loopItems(){
    for (let a = 0; a < text.length; a++ ){
      console.log(text[a])
      newHistoryScan(images.qr_test, text[a])
  }
}

Console MS Code Console

Phone Empty screen - phone

If I paste the reference to the newHistoryScan function there, the items are displayed on the phone.

working screen - phone

Calling a function that displays elements sequentially and should call this function the number of times

<ScrollView>
         
      {loopItems()}

        </ScrollView>

Correctly working (direct) function call.

<ScrollView>
         
        {newHistoryScan(images.qr_test, text[a])}

        </ScrollView>

Does this answer your question? [Loop inside React JSX](https://stackoverflow.com/questions/22876978/loop-inside-react-jsx) — Abe, Jun 04 '22 at 16:46

score 0 · Accepted Answer · answered Jun 04 '22 at 21:26

0

I think your issue is that loopItems doesnt return anything. To achieve this with a for loop you would do this:

function loopItems(){
    const items = []
    for (let a = 0; a < text.length; a++ ){
      console.log(text[a])
      items.push(
        newHistoryScan(images.qr_test, text[a])
      )
    }
    return items
}

I think you should use map instead:

 function loopItems(){
   // NOTE: I have no idea where you initialize text or images
   return text.map(item=>{
      console.log(item);
      return newHistoryScan(images.qr_test, item);
  })
}

answered Jun 04 '22 at 21:26

PhantomSpooks

2,877
2
8
13

Thank you so much, i tried mapping but you did it better - it works now. Unfortunately my Array don't have unique key prop, how i can add this? Error from console: Warning: Each child in a list should have a unique "key" prop. – Tacoo Jun 05 '22 at 09:34
convert `newHistoryScan` into a functional component by changing it to this `function NewHistoryScan({image, result}) { ... }`. In `loopItems` change your mapping a bit – PhantomSpooks Jun 05 '22 at 09:41
```return text.map((item,i)=>{ console.log(item); return ; })``` – PhantomSpooks Jun 05 '22 at 09:43

For loop inside Scrollview

1 Answers1