CODEWITHSUNDEEP
javascriptreactjsreact-nativefetch
Keremcan Buyuktaskin
Keremcan Buyuktaskin

Reputation: 327

TypeError: undefined is not an object (evaluating 'data.filter') - React Native

I am new to React/programming and having trouble fetching/displaying data. My code returns the error below. Thanks for your help in advance.

TypeError: TypeError: undefined is not an object (evaluating 'data.filter')

  import useFetch from 'react-fetch-hook'

  const { data } = useFetch('http://192.168.2.94:3000/list-categories')

  const locations = props.navigation.getParam('locationId')

  const displayedCategories = data.filter(      // ERROR HERE
    cat => cat.locId.indexOf(locations) >= 0
  )

  const renderGridItem = itemData => {
    return (
      <CategoryGridTile
        image={itemData.item.image}
        title={itemData.item.title}
      />
    )
  }

  return (
    <FlatList
      keyExtractor={(item, index) => item.id}
      data={displayedCategories}
      renderItem={renderGridItem}
    />
  )
}

JSON from http://192.168.2.94:3000/list-categories

Upvotes: 1

Views: 4759

Answers (2)

Jay
Jay

Reputation: 3117

I think at start there is no data so please use default assign 

  const { data = [] } = useFetch('http://192.168.2.94:3000/list-categories')

UPDATE

  const displayedCategories = data.filter(
    cat => cat && cat.locId && cat.locId.indexOf(locations) >= 0
  )

Upvotes: 1

Shubham Khatri
Shubham Khatri

Reputation: 281874

useFetch returns you a isLoading flag along with data which you must use to show a loading indicator till the data is available

const { isLoading, data } = useFetch('http://192.168.2.94:3000/list-categories');
 if(isLoading) {
    return <span>Loading...</span>
 }
 const locations = props.navigation.getParam('locationId')

  const displayedCategories = data.filter(
    cat => cat.locId.indexOf(locations) >= 0
  )

  const renderGridItem = itemData => {
    return (
      <CategoryGridTile
        image={itemData.item.image}
        title={itemData.item.title}
      />
    )
  }

  return (
    <FlatList
      keyExtractor={(item, index) => item.id}
      data={displayedCategories}
      renderItem={renderGridItem}
    />
  )

Upvotes: 2

Related Questions