react native firestore timestamps-CodePudding

I'm trying to fetch the data ("createdAt") field from my orders collection. When I called it in my code it gives me this error: "[Unhandled promise rejection: Error: Objects are not valid as a React child (found: object with keys {seconds, nanoseconds}). If you meant to render a collection of children, use an array instead.]"

Attached is a screenshot of our firebase db.

 <View style={styles.ViewContainer}>
      {orders.map((order, index) => {
        return (
          <View style={styles.orderCard}>
            {/* <Text>{order.createdAt}</Text> */}
            <View>
              <Text
                style={{
                  color: "black",
                  fontSize: 12,
                  fontFamily: "AvenirNext-Regular",
                  fontWeight: "300",
                  bottom: 4,
                }}
              >
                {order.createdAt}
              </Text>
            </View>
            {order.items.map((item) => (
              <View style={styles.orderItem}>
                <Text style={styles.orderText}>
                  You sent a coffee from {item.cafeName} for {item.price} and 
                </Text>

CodePudding user response：

Firebase timestamp is object with this format

order.createdAt = {nanoseconds: 0,
seconds: 1562524200}

You need to transform second to human-readable format like Sun Jul 07 2019 20:30:00.

Refactor code as below;


<Text
  style={{
    color: "black",
    fontSize: 12,
    fontFamily: "AvenirNext-Regular",
    fontWeight: "300",
    bottom: 4,
  }}
>
  {new Date(order.createdAt.seconds * 1000)}
</Text>;

CodePudding user response：

The issue is that order.createdAt is an object -- a Firestore Timestamp. React doesn't know how to render that object.

So, convert it to something that React does know how to render, like using the Timestamp.toDate() function of the Timestamp:

{order.createdAt.toDate()}