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 </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.