Tried to get frame for out of range index NaN react native error

Question

I am not so sure why this error is occurring. I have been trying to figure it out but have no idea how. The only thing new about my code is I am using react hooks and declared a state variable called allUsers.

import React, { useState, useEffect } from 'react'; import { API, graphqlOperation } from 'aws-amplify'


  const [allUsers, setAllUsers] = useState([]);

  listQuery = async () => {
    const allUsers = await API.graphql(graphqlOperation(listUsers));
    setAllUsers(allUsers);
    console.log(JSON.stringify(allUsers, null, 2));

  };

  useEffect(() => {
    listQuery();
  },[]);

  keyExtractor = (item, index) => index.toString()

  renderItem = ({ item }) => (
    <ListItem
      username={item.username}
    />
  )
    return (
      <FlatList
        keyExtractor={this.keyExtractor}
        data={allUsers}
        renderItem={this.renderItem}
      />
    )


}

Do you actually manage to write data with setAllUsers? And you are not passing anything to renderItem function, there is no item passed — Konstantin
Sorry can you explain the no item passed to renderItem bc I am fairly new to reactnative — tobiappdeveloper

Konstantin Konstantin · Accepted Answer · 2019-11-25T15:22:26

Concerning your renderItem function.

You are passing an item to this function, and when you are using it inside FlatList you are just invoking it, without any item passed. It should be something like

return (
      <FlatList
        data={allUsers}
        keyExtractor={this.keyExtractor}
        renderItem={({item}) => <this.renderItem item={item}/>}
      />
    )

Also, when using functional components, I personally tend to write all my methods as consts and then invoke them without any this. Should you decide to do this, be aware that your renderItem function would be without this and you would have to capitalize the first letter, RenderItem.

Tried to get frame for out of range index NaN react native error

1 Answers