TypeError: Undefined is not an object - React Native

Question

I'm a beginner to development and I'm getting Undefined is not an object error. What am I doing wrong here? When I console log placeID it returns value, but selectedPlace returns undefined. Thanks.

const PlaceDetailScreen = props => {
  const [places, setPlaces] = useState([])

  useEffect(() => {
    const getPlaces = async () => {
      const result = await axios.get('https://tgr-admin.appspot.com/api/places')

      setPlaces(result.data)
    }

    getPlaces()
  }, [])

  const placeID = props.navigation.getParam('placeId')

  const selectedPlace = places.find(place => place._id === placeID)

  return (
    <ScrollView>
      <Image source={{ uri: selectedPlace.image }} style={styles.image} />
    </ScrollView>
  )
}

Keremcan Buyuktaskin · Accepted Answer · 2020-03-06 10:05:02Z

3

The issue is with the selectedPlace, before getPlaces complete, the places is an empty array and .find method returns undefined. Accessing an image prop on selectedPlace undefined throws an error. Perform null check before accessing the image prop on selectedPlace.

const PlaceDetailScreen = props => {
  const [places, setPlaces] = useState([])

  useEffect(() => {
    const getPlaces = async () => {
      const result = await axios.get('https://#')

      setPlaces(result.data)
    }

    getPlaces()
  }, [])

  const placeID = props.navigation.getParam('placeId')

  const selectedPlace = places.find(place => place._id === placeID)
  // selectedPlace is undefined and places equals []
  // perform null check before accessing image prop
  return (
    <ScrollView>
      <Image source={{ uri: selectedPlace && selectedPlace.image }} style={styles.image} />
    </ScrollView>
  )
}

edited Mar 6, 2020 at 10:05

Keremcan Buyuktaskin

3374 silver badges14 bronze badges

answered Mar 5, 2020 at 11:39

Aadil Mehraj

2,6141 gold badge9 silver badges17 bronze badges

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

2 Comments

Keremcan Buyuktaskin Over a year ago

It worked, thank you very much, you're great. :) Also I'd like to ask 1 more question if you have time. When I use filter method instead of find, it returns an array. But when I console log selectedPlace.image it is undefined. What is the reason for that? Thank you very much again.

Aadil Mehraj Over a year ago

filter method return array of filtered objects, so access first array element then access image prop, like this selectedPlace[0] && selectedPlace[0].image

Keremcan Buyuktaskin · Accepted Answer · 2020-03-05 13:24:32Z

0

Based on Aadil Mehraj's answer, wrapping the content with null check also works. So I can add more stuff inside.

  return (
    <ScrollView>
      {selectedPlace && (
        <>
          <Image source={{ uri: selectedPlace.image }} style={styles.image} />

          <View style={styles.container}>
            <MarkdownView styles={markdownStyles}>
              {selectedPlace.content}
            </MarkdownView>
          </View>

        </>
      )}
    </ScrollView>
  )
}

answered Mar 5, 2020 at 13:24

Keremcan Buyuktaskin

3374 silver badges14 bronze badges

Collectives™ on Stack Overflow

TypeError: Undefined is not an object - React Native

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related