CODEWITHSUNDEEP
javascriptreactjsfirebasegoogle-cloud-firestore
problème0123
problème0123

Reputation: 871

how to display a timestamps type element retrieved from firestore

I want to display the content of my collection created with Firestore, I have a field "date" which is of type timestamp

when i want to display the values ​​i get an error:

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.

I display the content of my collection in a table from @material-ui.

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 [nameColl, setNameColl] = React.useState([]);
   
      React.useEffect(() => {
        const fetchData = async () => {
          const db = firebase.db;
          const data = await db.collection("nameColl").get();
          setNameColl(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>
                        {nameColl.map(nameColl => (
                            <TableRow key={nameColl.id}>
                            <TableCell align="right"> {nameColl.date} </TableCell> 
                            </TableRow>
                        ))}
                        </TableBody>
                    </Table>
                    </TableContainer>
          )

firebase.js

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

const config = {...};


class Firebase{

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

export default Firebase;

Upvotes: 0

Views: 362

Answers (1)

Doug Stevenson
Doug Stevenson

Reputation: 317487

You will have to figure out what you actually want to be displayed when you provide a Firestore timestamp object to your view. I would presume that the problem happens when this is being rendered:

<TableCell align="right"> {nameColl.date} </TableCell>

The error message is suggesting that you can't provide an object here. You probably want some sort of string formatting instead. A Timestamp object won't format itself for you (it has no idea what you actually want). But you can convert the Timestamp to a Date, then convert that to a default string format:

<TableCell align="right"> {nameColl.date.toDate().toString()} </TableCell>

But you will still ultimately figure out what you really want to display, if this not going to work for you.

Upvotes: 2

Related Questions