{"id":69472,"date":"2023-05-26T11:06:31","date_gmt":"2023-05-26T10:06:31","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=69472&preview=true&preview_id=69472"},"modified":"2024-10-04T10:44:55","modified_gmt":"2024-10-04T09:44:55","slug":"rendu-conditionnel-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/","title":{"rendered":"Ma\u00eetriser le rendu conditionnel de React : Une plong\u00e9e en profondeur"},"content":{"rendered":"

Le rendu conditionnel est une fonctionnalit\u00e9 puissante de React qui permet aux d\u00e9veloppeurs de rendre les composants en fonction de certaines conditions.<\/p>\n

C’est un concept fondamental qui joue un r\u00f4le crucial dans la construction d’applications web dynamiques et interactives.<\/p>\n

Dans ce guide complet, nous allons plonger en profondeur dans le rendu conditionnel dans React, en couvrant les techniques de base et avanc\u00e9es avec des exemples pour une bonne compr\u00e9hension.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Comprendre le rendu conditionnel dans React<\/h2>\n

Le rendu conditionnel dans React<\/a> permet aux d\u00e9veloppeurs de contr\u00f4ler dynamiquement le contenu affich\u00e9 \u00e0 l’\u00e9cran en fonction de valeurs sp\u00e9cifiques qui peuvent \u00eatre stock\u00e9es dans une variable, un \u00e9tat ou des props.<\/p>\n

Cela peut \u00eatre extr\u00eamement utile dans les sc\u00e9narios o\u00f9 vous souhaitez afficher ou masquer certains \u00e9l\u00e9ments de l’interface utilisateur, modifier la mise en page d’une page ou rendre un contenu diff\u00e9rent en fonction des interactions de l’utilisateur.<\/p>\n

Le rendu conditionnel est important dans les applications React car il vous permet de cr\u00e9er des interfaces utilisateur dynamiques et interactives qui peuvent r\u00e9pondre aux donn\u00e9es changeantes et aux interactions de l’utilisateur en temps r\u00e9el.<\/p>\n

Il contribuera \u00e0 am\u00e9liorer les performances<\/a> et l’efficacit\u00e9 de vos applications en \u00e9vitant le rendu inutile de composants ou d’\u00e9l\u00e9ments qui ne sont pas n\u00e9cessaires.<\/p>\n\n

Techniques de base pour le rendu conditionnel<\/h2>\n

Il existe plusieurs techniques de base que vous pouvez utiliser pour le rendu conditionnel dans React. Explorons chacune d’entre elles en d\u00e9tail.<\/p>\n

Utilisation de l’instruction if pour le rendu conditionnel<\/h3>\n

L’une des fa\u00e7ons les plus simples d’impl\u00e9menter le rendu conditionnel dans React est d’utiliser l’instruction traditionnelle if<\/code>.<\/p>\n

if (condition) {\n    return <p>Expression 1<\/p>;\n  } else {\n    return <p>Expression 2<\/p>;\n  }<\/code><\/pre>\n
L’instruction JavaScript if<\/code> peut \u00eatre utilis\u00e9e dans la m\u00e9thode render()<\/code> de votre composant pour effectuer un rendu conditionnel du contenu en fonction d’une certaine condition.<\/p>\n
Par exemple, vous pouvez utiliser l’instruction if pour afficher un spinner de chargement en attendant que les donn\u00e9es se chargent :<\/p>\n
import { useState, useEffect } from 'react';\nimport Spinner from '.\/Spinner';\n\nconst MyComponent = () => {\n  const [isLoading, setIsLoading] = useState(true);\n  const [data, setData] = useState(null);\n\n  useEffect(() => {\n    \/\/ Fetch data from an API\n    fetch('https:\/\/example.com\/data')\n      .then((response) => response.json())\n      .then((data) => {\n        setData(data);\n        setIsLoading(false);\n      });\n  }, []);\n\n  if (isLoading) {\n    return <Spinner \/>;\n  }\n\n  return <div>{\/* Render the data here *\/}<\/div>;\n};\n\nexport default MyComponent;<\/code><\/pre>\n
Dans cet exemple, MyComponent<\/code> r\u00e9cup\u00e8re des donn\u00e9es d’une API \u00e0 l’aide du hook useEffect<\/code>. En attendant le chargement des donn\u00e9es, nous affichons un composant Spinner \u00e0 l’aide de l’instruction if<\/code>.<\/p>\n
Un autre exemple peut \u00eatre le rendu d’une interface utilisateur de secours lorsqu’une erreur se produit lors du rendu de votre composant :<\/p>\n
const MyComponent = ({ data }) => {\n  if (!data) {\n    return <p>Something went wrong. Please try again later.<\/p>;\n  }\n\n  return <div>{\/* Render the data here *\/}<\/div>;\n};\n\nexport default MyComponent;<\/code><\/pre>\n
Dans ce code, nous avons un MyComponent<\/code> qui prend une propri\u00e9t\u00e9 data<\/code>. Si la propri\u00e9t\u00e9 data<\/code> est erron\u00e9e, nous affichons un message d’erreur \u00e0 l’aide de la d\u00e9claration if<\/code>.<\/p>\n
Enfin, vous pouvez afficher un contenu diff\u00e9rent selon le r\u00f4le de l’utilisateur \u00e0 l’aide de l’instruction if<\/code>:<\/p>\n
const MyComponent = ({ user }) => {\n  if (user.role === 'admin') {\n    return <p>Welcome, admin!<\/p>;\n  } else if (user.role === 'user') {\n    return <p>Welcome, user!<\/p>;\n  } else {\n    return <p>You are not authorized to access this page.<\/p>;\n  }\n};\n\nexport default MyComponent;<\/code><\/pre>\n
Dans ce code, nous avons un MyComponent<\/code> qui prend une propri\u00e9t\u00e9 user<\/code>. En fonction de la propri\u00e9t\u00e9 user.role<\/code>, nous affichons un contenu diff\u00e9rent \u00e0 l’aide de l’instruction if<\/code>.<\/p>\n
Utilisation de l’op\u00e9rateur ternaire pour le rendu conditionnel<\/h3>\n
Une autre fa\u00e7on concise d’impl\u00e9menter le rendu conditionnel dans React est d’utiliser l’op\u00e9rateur ternaire (?) dans JSX.<\/p>\n
L’op\u00e9rateur ternaire vous permet d’\u00e9crire une instruction if-else compacte en ligne en sp\u00e9cifiant 3 op\u00e9randes. Le premier op\u00e9rande est la condition, tandis que les deux autres op\u00e9randes sont les expressions. Si la condition est true<\/code>, la premi\u00e8re expression sera ex\u00e9cut\u00e9e ; sinon, la deuxi\u00e8me expression sera ex\u00e9cut\u00e9e.<\/p>\n
Par exemple, vous pouvez rendre diff\u00e9rents composants en fonction d’une propri\u00e9t\u00e9 :<\/p>\n
import ComponentA from '.\/ComponentA';\nimport ComponentB from '.\/ComponentB';\n\nconst ExampleComponent = ({ shouldRenderComponentA }) => {\n  return (\n    <div>\n      {shouldRenderComponentA ? <ComponentA \/> : <ComponentB \/>}\n    <\/div>\n  );\n};\n\nexport default ExampleComponent;<\/code><\/pre>\n
Dans ce code, nous avons un ExampleComponent<\/code> qui prend une propri\u00e9t\u00e9 appel\u00e9e shouldRenderComponentA<\/code>. Nous utilisons l’op\u00e9rateur ternaire pour rendre conditionnellement ComponentA<\/code> ou ComponentB<\/code> en fonction de la valeur de la propri\u00e9t\u00e9.<\/p>\n
Vous pouvez \u00e9galement rendre un texte diff\u00e9rent en fonction d’un \u00e9tat :<\/p>\n
import { useState } from 'react';\n\nconst ExampleComponent = () => {\n  const [showMessage, setShowMessage] = useState(false);\n\n  return (\n    <div>\n      <button onClick={() => setShowMessage(!showMessage)}>\n        {showMessage ? 'Hide message' : 'Show message'}\n      <\/button>\n      {showMessage ? <p>Hello, world!<\/p> : null}\n    <\/div>\n  );\n};\n\nexport default ExampleComponent;<\/code><\/pre>\n
Dans cet exemple, nous utilisons l’op\u00e9rateur ternaire pour rendre un texte diff\u00e9rent en fonction de la valeur de l’\u00e9tat showMessage<\/code>. Lorsque vous cliquez sur le bouton, la valeur de showMessage<\/code> est modifi\u00e9e et le texte est affich\u00e9 ou masqu\u00e9 en cons\u00e9quence.<\/p>\n
Enfin, vous pouvez afficher une barre de chargement pendant que les donn\u00e9es sont r\u00e9cup\u00e9r\u00e9es :<\/p>\n
import { useState, useEffect } from 'react';\nimport Spinner from '.\/Spinner';\n\nconst ExampleComponent = () => {\n  const [isLoading, setIsLoading] = useState(true);\n  const [data, setData] = useState(null);\n\n  useEffect(() => {\n    const fetchData = async () => {\n      const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/todos\/1');\n      const jsonData = await response.json();\n      setData(jsonData);\n      setIsLoading(false);\n    };\n    fetchData();\n  }, []);\n\n  return (\n    <div>\n      {isLoading ? <Spinner \/> : <p>{data.title}<\/p>}\n    <\/div>\n  );\n};\n\nexport default ExampleComponent;<\/code><\/pre>\n
Dans cet exemple, nous utilisons l’op\u00e9rateur ternaire pour rendre conditionnellement une barre de chargement pendant que des donn\u00e9es sont extraites d’une API. Une fois les donn\u00e9es disponibles, nous rendons la propri\u00e9t\u00e9 title<\/code> \u00e0 l’aide de l’op\u00e9rateur ternaire.<\/p>\n
Utilisation des op\u00e9rateurs logiques AND et OR pour le rendu conditionnel<\/h3>\n
Vous pouvez \u00e9galement utiliser les op\u00e9rateurs logiques AND (&&<\/code>) et OR (||<\/code>) pour mettre en \u0153uvre le rendu conditionnel dans React.<\/p>\n
L’op\u00e9rateur logique AND vous permet d’effectuer le rendu d’un composant uniquement si une certaine condition est vraie, tandis que l’op\u00e9rateur logique OR vous permet d’effectuer le rendu d’un composant si l’une ou l’autre des conditions est vraie.<\/p>\n
Ces op\u00e9rateurs sont utiles lorsque vous avez des conditions simples qui d\u00e9terminent si un composant doit \u00eatre rendu ou non. Par exemple, si vous souhaitez rendre un bouton uniquement si un formulaire est valide, vous pouvez utiliser l’op\u00e9rateur logique AND comme suit :<\/p>\n
import { useState } from 'react';\n\nconst FormComponent = () => {\n  const [formValues, setFormValues] = useState({ username: \"\", password: \"\" });\n\n  const isFormValid = formValues.username && formValues.password;\n\n  const handleSubmit = (event) => {\n    event.preventDefault();\n    \/\/ Submit form data\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <input\n        type=\"text\"\n        value={formValues.username}\n        placeholder=\"Type Username...\"\n        onChange={(e) =>\n          setFormValues({ ...formValues, username: e.target.value })\n        }\n      \/>\n      <br \/>\n      <input\n        type=\"password\"\n        value={formValues.password}\n        placeholder=\"Type Password...\"\n        onChange={(e) =>\n          setFormValues({ ...formValues, password: e.target.value })\n        }\n      \/>\n      {isFormValid && <button type=\"submit\">Submit<\/button>}\n    <\/form>\n  );\n};\n\nexport default FormComponent;<\/code><\/pre>\n
Dans cet exemple, nous avons un site FormComponent<\/code> qui contient un formulaire avec deux champs de saisie pour username<\/code> et password<\/code>. Nous utilisons le crochet useState<\/code> pour g\u00e9rer les valeurs du formulaire et la variable isFormValid<\/code> pour v\u00e9rifier si les deux champs de saisie ont des valeurs. En utilisant l’op\u00e9rateur logique ET (&&), nous ne rendons le bouton de soumission que si isFormValid<\/code> est vrai. Cela garantit que le bouton n’est activ\u00e9 que lorsque le formulaire est valide.<\/p>\n
De m\u00eame, vous pouvez utiliser l’op\u00e9rateur OR pour afficher un message de chargement si les donn\u00e9es sont toujours en cours de chargement ou un message d’erreur si une erreur se produit :<\/p>\n
import React, { useEffect, useState } from 'react';\n\nconst DataComponent = () => {\n  const [data, setData] = useState(null);\n  const [isLoading, setIsLoading] = useState(true);\n  const [errorMessage, setErrorMessage] = useState('');\n\n  useEffect(() => {\n    const fetchData = async () => {\n      try {\n        const response = await fetch('https:\/\/api.example.com\/data');\n        const data = await response.json();\n        setData(data);\n      } catch (error) {\n        setErrorMessage('An error occurred while fetching data.');\n      } finally {\n        setIsLoading(false);\n      }\n    };\n\n    fetchData();\n  }, []);\n\n  return (\n    <>\n      {errorMessage || isLoading ? (\n        <p>{errorMessage || 'Loading...'}<\/p>\n      ) : (\n        <ul>\n          {data.map((item) => (\n            <li key={item.id}>{item.name}<\/li>\n          ))}\n        <\/ul>\n      )}\n    <\/>\n  );\n};\n\nexport default DataComponent;<\/code><\/pre>\n
Dans cet exemple, un site DataComponent<\/code> r\u00e9cup\u00e8re des donn\u00e9es d’une API \u00e0 l’aide de fetch et les affiche dans une liste. Nous utilisons le crochet useState<\/code> pour g\u00e9rer les donn\u00e9es, l’\u00e9tat de chargement et le message d’erreur. En utilisant l’op\u00e9rateur logique OR (||), nous pouvons afficher un message de chargement ou un message d’erreur si l’une ou l’autre de ses conditions est vraie. Cela garantit que l’utilisateur voit un message indiquant l’\u00e9tat actuel du processus de r\u00e9cup\u00e9ration des donn\u00e9es.<\/p>\n
L’utilisation des op\u00e9rateurs logiques AND et OR pour le rendu conditionnel dans React est une mani\u00e8re concise et lisible de traiter des conditions simples. Cependant, il est pr\u00e9f\u00e9rable d’utiliser d’autres approches comme les d\u00e9clarations switch<\/code> pour une logique plus complexe.<\/p>\n
Techniques avanc\u00e9es pour le rendu conditionnel<\/h2>\n
Le rendu conditionnel dans React peut \u00eatre plus complexe en fonction des exigences de votre application. Voici quelques techniques avanc\u00e9es que vous pouvez utiliser pour le rendu conditionnel dans des sc\u00e9narios plus complexes.<\/p>\n
Utilisation des instructions Switch pour le rendu conditionnel<\/h3>\n
Bien que les instructions if et les op\u00e9rateurs ternaires soient des approches courantes pour le rendu conditionnel, il arrive qu’une instruction switch<\/code> soit plus appropri\u00e9e, en particulier lorsqu’il s’agit de conditions multiples.<\/p>\n
Voici un exemple :<\/p>\n
import React from 'react';\nconst MyComponent = ({ userType }) => {\n  switch (userType) {\n    case 'admin':\n      return <p>Welcome, admin user!<\/p>;\n    case 'user':\n      return <p>Welcome, regular user!<\/p>;\n    default:\n      return <p>Please log in to continue.<\/p>;\n  }\n};\nexport default MyComponent;<\/code><\/pre>\n
Dans ce code, une instruction switch<\/code> est utilis\u00e9e pour effectuer un rendu conditionnel du contenu en fonction de l’instruction userType<\/code>. Cette approche peut s’av\u00e9rer utile lorsqu’il s’agit de conditions multiples et offre une mani\u00e8re plus organis\u00e9e et plus lisible de g\u00e9rer une logique complexe.<\/p>\n
Rendu conditionnel avec React Router<\/h3>\n
React Router est une biblioth\u00e8que populaire pour g\u00e9rer le routage c\u00f4t\u00e9 client dans les applications React. React Router vous permet d’effectuer un rendu conditionnel des composants en fonction de l’itin\u00e9raire actuel.<\/p>\n
Voici un exemple de mise en \u0153uvre du rendu conditionnel \u00e0 l’aide de React Router :<\/p>\n
import { useState } from 'react';\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n\nimport Home from '.\/components\/Home';\nimport Login from '.\/components\/Login';\nimport Dashboard from '.\/components\/Dashboard';\nimport NotFound from '.\/components\/NotFound';\n\nconst App = () => {\n  const [isLoggedIn, setIsLoggedIn] = useState(false);\n\n  return (\n    <Router>\n      <Switch>\n        <Route exact path=\"\/\" component={Home} \/>\n        <Route path=\"\/login\">\n          <Login setIsLoggedIn={setIsLoggedIn} \/>\n        <\/Route>\n        {isLoggedIn ? (\n          <Route path=\"\/dashboard\" component={Dashboard} \/>\n        ) : (\n          <Route component={NotFound} \/>\n        )}\n      <\/Switch>\n    <\/Router>\n  );\n};\n\nexport default App;<\/code><\/pre>\n
Dans ce code, nous utilisons l’\u00e9tat isLoggedIn<\/code> pour rendre conditionnellement soit le composant Dashboard<\/code> si l’utilisateur est connect\u00e9, soit le composant NotFound<\/code> si l’utilisateur n’est pas connect\u00e9. Le composant Login<\/code> d\u00e9finit l’\u00e9tat isLoggedIn<\/code> sur true<\/code> une fois que l’utilisateur s’est connect\u00e9 avec succ\u00e8s.<\/p>\n
Notez que nous utilisons la propri\u00e9t\u00e9 des enfants du composant <Route><\/code> pour transmettre le composant Login<\/code> et la fonction setIsLoggedIn<\/code>. Cela nous permet de transmettre des \u00e9l\u00e9ments au composant Login<\/code> sans les sp\u00e9cifier dans la propri\u00e9t\u00e9 path<\/code>.<\/p>\n\n
R\u00e9sum\u00e9<\/h2>\n
Le rendu conditionnel est une technique puissante de React qui vous permet de mettre \u00e0 jour dynamiquement l’interface utilisateur en fonction de diff\u00e9rentes conditions.<\/p>\n
En fonction de la complexit\u00e9 de la logique de l’interface utilisateur de votre application, vous pouvez choisir l’approche qui r\u00e9pond le mieux \u00e0 vos besoins.<\/p>\n
N’oubliez pas de garder votre code propre, organis\u00e9 et lisible, et de toujours tester minutieusement votre logique de rendu conditionnel pour vous assurer qu’elle fonctionne comme pr\u00e9vu dans diff\u00e9rents sc\u00e9narios.<\/p>\n
Vous cherchez la solution d’h\u00e9bergement id\u00e9ale pour vos applications React ? Essayez gratuitement l’h\u00e9bergement d’applications de Kinsta<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"
Le rendu conditionnel est une fonctionnalit\u00e9 puissante de React qui permet aux d\u00e9veloppeurs de rendre les composants en fonction de certaines conditions. C’est un concept fondamental …<\/p>\n","protected":false},"author":287,"featured_media":69473,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1004],"class_list":["post-69472","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-react"],"yoast_head":"\nMa\u00eetriser le rendu conditionnel de React : Une plong\u00e9e en profondeur - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Apprenez comment fonctionne le rendu conditionnel dans React et faites passer vos comp\u00e9tences en d\u00e9veloppement web au niveau sup\u00e9rieur gr\u00e2ce \u00e0 notre guide complet.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ma\u00eetriser le rendu conditionnel de React : Une plong\u00e9e en profondeur\" \/>\n<meta property=\"og:description\" content=\"Apprenez comment fonctionne le rendu conditionnel dans React et faites passer vos comp\u00e9tences en d\u00e9veloppement web au niveau sup\u00e9rieur gr\u00e2ce \u00e0 notre guide complet.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-26T10:06:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-04T09:44:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/react-conditional-render.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Apprenez comment fonctionne le rendu conditionnel dans React et faites passer vos comp\u00e9tences en d\u00e9veloppement web au niveau sup\u00e9rieur gr\u00e2ce \u00e0 notre guide complet.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/react-conditional-render.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Ma\u00eetriser le rendu conditionnel de React : Une plong\u00e9e en profondeur\",\"datePublished\":\"2023-05-26T10:06:31+00:00\",\"dateModified\":\"2024-10-04T09:44:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/\"},\"wordCount\":1581,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/react-conditional-render.jpg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/\",\"name\":\"Ma\u00eetriser le rendu conditionnel de React : Une plong\u00e9e en profondeur - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/react-conditional-render.jpg\",\"datePublished\":\"2023-05-26T10:06:31+00:00\",\"dateModified\":\"2024-10-04T09:44:55+00:00\",\"description\":\"Apprenez comment fonctionne le rendu conditionnel dans React et faites passer vos comp\u00e9tences en d\u00e9veloppement web au niveau sup\u00e9rieur gr\u00e2ce \u00e0 notre guide complet.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/react-conditional-render.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/react-conditional-render.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Ma\u00eetriser le rendu conditionnel de React : Une plong\u00e9e en profondeur\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d'h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ma\u00eetriser le rendu conditionnel de React : Une plong\u00e9e en profondeur - Kinsta\u00ae","description":"Apprenez comment fonctionne le rendu conditionnel dans React et faites passer vos comp\u00e9tences en d\u00e9veloppement web au niveau sup\u00e9rieur gr\u00e2ce \u00e0 notre guide complet.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/","og_locale":"fr_FR","og_type":"article","og_title":"Ma\u00eetriser le rendu conditionnel de React : Une plong\u00e9e en profondeur","og_description":"Apprenez comment fonctionne le rendu conditionnel dans React et faites passer vos comp\u00e9tences en d\u00e9veloppement web au niveau sup\u00e9rieur gr\u00e2ce \u00e0 notre guide complet.","og_url":"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2023-05-26T10:06:31+00:00","article_modified_time":"2024-10-04T09:44:55+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/react-conditional-render.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Apprenez comment fonctionne le rendu conditionnel dans React et faites passer vos comp\u00e9tences en d\u00e9veloppement web au niveau sup\u00e9rieur gr\u00e2ce \u00e0 notre guide complet.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/react-conditional-render.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Joel Olawanle","Dur\u00e9e de lecture estim\u00e9e":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Ma\u00eetriser le rendu conditionnel de React : Une plong\u00e9e en profondeur","datePublished":"2023-05-26T10:06:31+00:00","dateModified":"2024-10-04T09:44:55+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/"},"wordCount":1581,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/react-conditional-render.jpg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/","url":"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/","name":"Ma\u00eetriser le rendu conditionnel de React : Une plong\u00e9e en profondeur - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/react-conditional-render.jpg","datePublished":"2023-05-26T10:06:31+00:00","dateModified":"2024-10-04T09:44:55+00:00","description":"Apprenez comment fonctionne le rendu conditionnel dans React et faites passer vos comp\u00e9tences en d\u00e9veloppement web au niveau sup\u00e9rieur gr\u00e2ce \u00e0 notre guide complet.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/react-conditional-render.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/react-conditional-render.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/rendu-conditionnel-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/fr\/sujets\/react\/"},{"@type":"ListItem","position":3,"name":"Ma\u00eetriser le rendu conditionnel de React : Une plong\u00e9e en profondeur"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d'h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/fr\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/69472","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=69472"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/69472\/revisions"}],"predecessor-version":[{"id":69483,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/69472\/revisions\/69483"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69472\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69472\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69472\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69472\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69472\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69472\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69472\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69472\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69472\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/69473"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=69472"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=69472"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=69472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}