[Reactjs + FireStore] Récupérer la date de type timestamp

probleme
Javascript

Bonjour,

Je souhaite afficher le contenu de ma collection crée avec Firestore, j'ai trois champs, dont une de type timestamp.

Ce que je fais

index.js 

import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import { FirebaseContext } from '../Firebase'

const Welcome = () => {

    const firebase = useContext(FirebaseContext);
    const [attr, setAttr] = React.useState([]);

    // année/mois/jour
    const amj = new Intl.DateTimeFormat("fr-Fr", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
      });

      // heure:minute:second
      const hms = new Intl.DateTimeFormat("fr-Fr", {
        hour: '2-digit', 
        minute: '2-digit', 
        second: '2-digit'
      });

      React.useEffect(() => {
        const fetchData = async () => {
          const db = firebase.db;
          const data = await db.collection("nom_collection").get();
          setAttr(data.docs.map(doc => ({ ...doc.data(), id: doc.id })));
        };
        fetchData();
      }, []);

      return(
                <TableContainer component={Paper}>
                    <Table aria-label="simple table">
                        <TableHead>
                        <TableRow>
                            <TableCell align="right"> Date&nbsp;</TableCell>
                        </TableRow>
                        </TableHead>
                        <TableBody>
                        {attr.map(attr => (
                        <TableRow key={attr.id}>
                            <TableCell align="right"> {attr.date} </TableCell> 
                            </TableRow>
                        ))}
                        </TableBody>
                    </Table>
                    </TableContainer>
          )

firebase.js

import app from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore'

const config = {
...
  };

class Firebase{

    constructor(){
        app.initializeApp(config)
        this.db = app.firestore();
    }
}

export default Firebase;

Ce que je veux

Je voudrais afficher la date. (Puis ensuite j'essayerais de séparer la date en deux date et heure)

Ce que j'obtiens

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.

Aucune réponse