Discussions

react-routeur-dom v6 - Alternative props.match.params.id

Image

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;

 

 

Antoine Delamare
Blockchain &amp; Cie.
2 réponses
Image
Louis-Nicolas Leuillet
Le 09/03/2023 à 13:27

Hello Antoine

Wow merci pour l'initiative ! Je n'ai rien à dire, tu as d'ailleurs commenté parfaitement ton code pour que chacun puisse comprendre.

Merci beaucoup :)

Image
Antoine Delamare
Le 09/03/2023 à 13:47

De rien !

Image
Inscrivez-vous ou connectez-vous pour participer à la discussion.

Informations

Créée le March 8, 2023 7:07 PM
Dernière activité le March 8, 2023 7:07 PM