fetching data from firestore. error: Invariant Violation: Objects are not valid as a React child

Question

I am fetching data from firestore. When I console.log the received result, everything looks fine, but when I try to display them I get this error:

uncaught Invariant Violation: Objects are not valid as a React child (found: >object with keys {seconds, nanoseconds})

console.log(props.transactions) result:

{props.transactions &&
   props.transactions
        .map(transaction => {
            return (
              <tr key={transaction.id}>
                 <td>{transaction.date}</td>
                 <td>{transaction.description}</td>
                 <td>{transaction.category}</td>
                 <Cell transactionType={transaction.transactionType}>
                   {transaction.amount}
                 </Cell>
                 <td>
                   <Button>Edit</Button>
                 </td>
               </tr>
              )
           })
}

Answer 1

The problem is that one of your transaction.date is of type Timestamp which is an object and cannot be directly rendered.