Passer des variables à un composant

Nous avons vu comment créer des composants, comment les charger dans notre page, ou dans un autre composant.

Nous allons maintenant nous pencher sur le fait de passer des variables à un composant. Ce sera utlise si vous souhaitez ré-utiliser la mise en page d'un composant avec d'autres données. Un exemple concret viendra dans la suite du tutoriel avec un composant de pagination réutilisable.

Admettons que la mise en page d'une page actualité puisse un jour être utlisée pour afficher des événements (un séminaire, un salon, etc). Je vais donc créer un composant auquel je passerai les données de mon actualité plutôt que de le gérer directement dans la page comme nous l'avons fait précédemment.

Je crée un composant Actu.js dans src/components et son style actu.module.scss

J'ai décidé d'appeler mon composant Actu et non pas New car le mot new est très souvent utilisé pour créer une instance d'un objet d'une classe. Je pars du principe que ce mot ne devrait pas être utilisé pour créer un composant.

/* src/components/actu.module.scss */
.image {
  max-height: 100%;
  width: auto;
  max-width: 100%;
  height: 300px;
}

/* src/components/Actu.js */
import React from "react";
import * as containerStyles from "./actu.module.scss";

const Actu = ({ data }) => {
  const title = data.nodeNews.title;
  const imageUrl = data.nodeNews.relationships.field_image.localFile.url;
  const body = data.nodeNews.body.value;
  return (
    <section className="">
      <h1 className={containerStyles.title}>{title}</h1>
      <img className={containerStyles.image} src={imageUrl} alt={title} />
      <div className={containerStyles.body} dangerouslySetInnerHTML={{ __html: body }}></div>
    </section>
  );
};
export default Actu;

Puis dans ma page new.js je vais importer mon nouveau composant auquel je passerai les données que j'affichais déjà dans ma page.

/* src/pages/news/new.js */
import React from "react";
import { graphql } from "gatsby";
import Layout from "../../components/Layout";
import { Helmet } from "react-helmet";
import Actu from "../../components/Actu";

const NewPage = ({ data }) => {
  const title = data.nodeNews.title;
  return (
    <Layout>
      <Actu data={data} />
    </Layout>
  );
};
export default NewPage;

export const query = graphql`
  query actualite ($slug: String) {
    nodeNews(path: {alias: {eq: $slug}}, status: {eq: true}) {
      body {
        value
      }
      relationships {
        field_image {
          localFile {
            url
          }
        }
      }
      drupal_internal__nid
      path {
        alias
      }
      title
    }
  }
`;