RenderFeed function of react-native FlatList - Error: Objects are not valid as a React child

user_13074884 0
Viewed 112

Full error text

Error: Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72}). If you meant to render a collection of children, use an array instead.

renderFeed = async (item) => {
  let token = await localStorage.getItem('userToken')

  let data = await axios
    .get(ReactionsURL, {
      headers: {
        "token": token,
      },
    })
    .then((responseData) => {
      console.log("responseData", responseData);
      // Scope to use reactions
    })
    .catch((error) => {});
    

  const imgsrc =item.item.photo == null ? "../photos/defaultAvatar.png" : item.item.photo;


  return (
    <TouchableHighlight
      underlayColor="#F6F8FC"
      onPress={() =>
        navigation.navigate({
          name: "Details",
          params: {
            nav: navigation,
            id: item.item._id,
          },
        })
      }
    >
      <View style={styles.styleCard}>
        <View style={styles.TextWrapper}>
          <Title
            numberOfLines={4}
            ellipsizeMode="tail"
            style={styles.styleTitle}
          >
            {item.item.title}
          </Title>
          <Paragraph style={styles.Textdate}>
            {parseInt(new Date().getFullYear()) ===
            parseInt(moment(item.item.lastEdit).format("Y"))
              ? moment(item.item.lastEdit).format("dddd Do MMMM")
              : moment(item.item.lastEdit).format("dddd Do MMMM Y")}
          </Paragraph>
        </View>
        <Surface style={styles.Viewphoto}>
          <Image source={{ uri: imgsrc }} style={styles.photo} />
        </Surface>
      </View>
    </TouchableHighlight>

  );
};

I don't have any object as a React child, how can I solve this error?

react-native javascript
2 Answers

try

localStorage.getItem('userToken')

import your image at top and then update your imgSrc. Also, try using the optional chaining operator with img src:

import defaultImage from "../photos/defaultAvatar.png"; //goes to top of file

const imgsrc = item?.item?.photo || defaultImage ;
user_92565360

I fixed this problem by removing the async await from the function that renders.

I implemented the get request in an other function

user_130748840
Related