Question 74112 in Reactjs Question posted in
The new location for the React Documentation can be found here.

ERROR TypeError: undefined is not a function Why my object is not converting to array? – Reactjs

ERROR TypeError: undefined is not a function Why my object is not converting to array? this is the error that I am facing I am trying to map all the item which is currently object but I want to convert it to array to map all them how can I do that? its not been converted into array I tried some solutions on internet how can I do that?

Currenlty its giving me null and when i first const propertyValues = Object.values(item); it gave me ERROR TypeError: undefined is not a function error

const renderImages = ({ item, index }) => {
        console.log(item)
        if (!item || !Array.isArray(item)) {
            return null;
        }
        
        const propertyValues = Object.values(item);
        console.log(propertyValues);
        
        return (
            <View style={styles.images}>
                {item.map((url) => (
                    <Image key={url} style={styles.pic} source={{ uri: url }} />
                ))}
            </View>
        );
    };

If i do nothing just log the item it logs something like this:

 LOG  {"picture": "https://firebasestorage.googleapis.com/v0/b/myprojectfirebase.appspot.com/o/file%3A%2Fdata%2Fuser%2F0%2Fhost.exp.exponent%2Fcache%2FExperienceData%2F%252540anonymous%25252FYounme-4dc528f7-0647-403c-9671-6a595b71bf0b%2FImagePicker%2Fba5eb500-c4e3-4199-9cef-5a8bfb3b1219.jpeg?alt=media&token=49041038-deef-40d9-9809-41210982ae36"}



       {
                    userdata ?
                        <FlashList
                            data={userdata.pictures}
                            renderItem={renderImages}
                            keyExtractor={(item, index) => index.toString()}
                            getItemCount={() => userdata.pictures.length}
                            getItem={(data, index) => data[index]}
                            initialNumToRender={5}
                            windowSize={5}
                            ListHeaderComponent={
                                   ...//
    
    }

}
    
    />
Tags:

2

Answers


  1. 0

    If item is an object, this code will always return null:

    if (!item || !Array.isArray(item)) {
  return null;
}

    Additionally, if you want to create an array of URLs, you can simply use Object.keys and .map to create an array of item urls.

    const properties = Object.keys(item);
const values = properties.map((p) => item[p].url);

    Since item just has one picture, why not simplify:

    const renderImages = ({ item, index }) => {
  return (
    <View style={styles.images}>
      <Image key={item.picture} style={styles.pic} source={{ uri: item.picture }} />
    </View>
  );
};
    Login or Signup to reply.
  2. 0

    Consider doing:

    const renderImages = ({ item, index }) => {
  return (
    <View style={styles.images}>
      <Image key={url.picture} style={styles.pic} source={{ uri: url.picture }} />
    </View>
  );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search