For Loop in React Native Render Method

Question

I am trying to pass several arrays through a for loop in the render method and render that data with View. I keep getting an error in sentry.io "undefined is not an object (evaluating 't.number[o]')"

I am pretty new to this and any help would be appreciated!

render() {
  const userInfo = this.state.userInfo;
  const thisArray = this.state.thisArray;
  var myloop = [];
  for (let i = 0; i < 2; i++) {
    const totals = thisArray[i].number;
    const yourNumber = userInfo.number[i].enrolledNumber;
    myloop.push(
      <View key={i}>
        <Separator />
        <Text style={[styles.content, { fontSize: 20 }]}>
          {thisArray[i].name}
        </Text>
      </View>
    )
  }

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView>
        <View style={styles.container}>
          <Text style={styles.txtColor}>Data</Text>
          {myloop}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

I am getting the following error

undefined is not an object (evaluating 'thisArray[i].number')

Does anyone have thoughts?

Check the thisArray.length. Your thisArray doesn't have an index 1 or 2. — Rutvik Bhatt
– Rutvik Bhatt, Commented Feb 24, 2020 at 5:24
I've added the full component code. It works in development mode in Expo but fails in Expo Production mode. — singamnv
– singamnv, Commented Feb 24, 2020 at 12:45

singamnv · Accepted Answer · 2020-02-25 02:21:27Z

1

I figured it out.

I passed the items through a flat list as such:

        <FlatList
            data={this.state.thisArray}
            ItemSeparatorComponent={this.FlatListItemSeparator}
            renderItem={this.renderItem}
            keyExtractor={item => item.name}
          />

then I called it through a renderItem method

renderItem = ({ item}) => {

    return (
        <View>
          <Text style={{ color: "white" }}>{item.name}</Text>
          <Text style={{ color: "white" }}>{item.id}</Text>
        </View>
)
}

Thanks guys,

answered Feb 25, 2020 at 2:21

singamnv

912 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

For Loop in React Native Render Method

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