Bonjour a tous,
Je propose la correction de code suivant suite à l'actualisation de la V6 de react-routeur-dom par rapport au 'slug'.
Etant débutant, vos améliorations sont bienvenues !
Merci par avance !
// Librairies
import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import classes from './Article.module.css';
import axios from '../../../Config/axios-firebase';
const Article = () => {
// STATES
const [article, setArticle] = useState({});
// CYCLE DE VIE
// ComponentDidMount
useEffect(() => {
// Challenge : récupération du titre de l'article depuis Firebase
// ?orderBy='slug'&equalTo='{slug}'
axios
.get('/articles.json/?orderBy="slug"&equalTo="' + slug + '"')
.then((response) => {
// Boucle pour récupération du titre
for (let key in response.data) {
setArticle({
...response.data[key],
id: key,
});
}
})
.catch((error) => {
console.log(error);
});
}, []);
// VARIABLES
// Variable 1 - slug de l'article
const { slug } = useParams();
// Variable 2 - Transformation date locale du pays
let date = new Date(article.date).toLocaleDateString('fr-FR');
// Rendu JSX
return (
<>
<h1>{article.titre}</h1>
{/* {props.location.state && props.location.state.fromHome ? (
<p>Cliqué depuis accueil</p>
) : null}*/}
</>
);
};
export default Article;
