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