{"id":18,"date":"2025-02-12T22:02:15","date_gmt":"2025-02-12T21:02:15","guid":{"rendered":"http:\/\/boissiz.cluster029.hosting.ovh.net\/?p=18"},"modified":"2025-06-07T14:32:39","modified_gmt":"2025-06-07T12:32:39","slug":"utilisation-de-loperateur-ternaire-pour-laffichage-en-react","status":"publish","type":"post","link":"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/2025\/02\/12\/utilisation-de-loperateur-ternaire-pour-laffichage-en-react\/","title":{"rendered":"Utilisation de l’op\u00e9rateur ternaire pour l’affichage en React"},"content":{"rendered":"\n
\n

Utilisation de l’op\u00e9rateur ternaire pour l’affichage en React<\/p>\n<\/blockquote>\n\n\n\n

L’op\u00e9rateur ternaire est une mani\u00e8re tr\u00e8s pratique de r\u00e9aliser des conditions dans votre code JavaScript. Il est tr\u00e8s utilis\u00e9 dans React pour le rendu conditionnel dans le JSX.<\/p>\n\n\n\n

\n

Qu’est-ce que l’op\u00e9rateur ternaire ?<\/p>\n<\/blockquote>\n\n\n\n

L’op\u00e9rateur ternaire est une forme compacte d’une instruction `if-else`. Il est appel\u00e9 \u00ab\u00a0ternaire\u00a0\u00bb parce qu’il implique trois op\u00e9rants. La syntaxe g\u00e9n\u00e9rale de l’op\u00e9rateur ternaire est `condition ? expressionSiVraie : expressionSiFausse`.<\/p>\n\n\n\n

Par exemple :<\/p>\n\n\n\n

let nombre = 10;\nlet resultat = (nombre > 5) ? 'Le nombre est sup\u00e9rieur \u00e0 5' : 'Le nombre est inf\u00e9rieur ou \u00e9gal \u00e0 5';<\/code><\/pre>\n\n\n\n
\n
Comment utiliser l’op\u00e9rateur ternaire dans React ?<\/p>\n<\/blockquote>\n\n\n\n
Dans React, l’op\u00e9rateur ternaire est souvent utilis\u00e9 pour le rendu conditionnel. C’est une mani\u00e8re d’afficher diff\u00e9rents \u00e9l\u00e9ments ou composants en fonction de certaines conditions.<\/p>\n\n\n\n
Prenons l’exemple d’un composant qui affiche une salutation diff\u00e9rente en fonction de l’heure de la journ\u00e9e :<\/p>\n\n\n\n
import React from 'react';\nclass Salutation extends React.Component {\nrender() {\nlet heureActuelle = new Date().getHours();\nreturn (\n\n{heureActuelle < 12 ? (\nBonjour !\n) : (\nBonsoir !\n)}\n\n);\n}\n}\n\nexport default Salutation;<\/code><\/pre>\n\n\n\n
Dans cet exemple, nous utilisons l’op\u00e9rateur ternaire pour d\u00e9cider si nous devrions afficher \u00ab\u00a0Bonjour !\u00a0\u00bb ou \u00ab\u00a0Bonsoir !\u00a0\u00bb. Si `heureActuelle` est inf\u00e9rieure \u00e0 12, alors \u00ab\u00a0Bonjour !\u00a0\u00bb est affich\u00e9, sinon \u00ab\u00a0Bonsoir !\u00a0\u00bb est affich\u00e9.<\/p>\n\n\n\n
\n
Conclusion<\/p>\n<\/blockquote>\n\n\n\n
L’op\u00e9rateur ternaire est un outil tr\u00e8s puissant pour rendre votre code plus lisible et plus concis. Il est particuli\u00e8rement utile dans React pour cr\u00e9er des affichages conditionnels dans votre JSX. Avec la pratique, l’op\u00e9rateur ternaire deviendra une partie int\u00e9grante de votre bo\u00eete \u00e0 outils de d\u00e9veloppement React.<\/p>\n","protected":false},"excerpt":{"rendered":"
Utilisation de l’op\u00e9rateur ternaire pour l’affichage en React L’op\u00e9rateur ternaire est une mani\u00e8re tr\u00e8s pratique…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[3],"tags":[],"class_list":["post-18","post","type-post","status-publish","format-standard","hentry","category-developpement-frontend"],"yoast_head":"\nUtilisation de l'op\u00e9rateur ternaire pour l'affichage en React - Le site du matou<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/2025\/02\/12\/utilisation-de-loperateur-ternaire-pour-laffichage-en-react\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Utilisation de l'op\u00e9rateur ternaire pour l'affichage en React - Le site du matou\" \/>\n<meta property=\"og:description\" content=\"Utilisation de l’op\u00e9rateur ternaire pour l’affichage en React L’op\u00e9rateur ternaire est une mani\u00e8re tr\u00e8s pratique…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/2025\/02\/12\/utilisation-de-loperateur-ternaire-pour-laffichage-en-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Le site du matou\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-12T21:02:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-07T12:32:39+00:00\" \/>\n<meta name=\"author\" content=\"admin2154\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin2154\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/2025\/02\/12\/utilisation-de-loperateur-ternaire-pour-laffichage-en-react\/\",\"url\":\"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/2025\/02\/12\/utilisation-de-loperateur-ternaire-pour-laffichage-en-react\/\",\"name\":\"Utilisation de l'op\u00e9rateur ternaire pour l'affichage en React - Le site du matou\",\"isPartOf\":{\"@id\":\"https:\/\/boissiebruno-pageperso-pi.ovh\/#website\"},\"datePublished\":\"2025-02-12T21:02:15+00:00\",\"dateModified\":\"2025-06-07T12:32:39+00:00\",\"author\":{\"@id\":\"https:\/\/boissiebruno-pageperso-pi.ovh\/#\/schema\/person\/d62778c4a9a9eb68b258ce862c5cb052\"},\"breadcrumb\":{\"@id\":\"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/2025\/02\/12\/utilisation-de-loperateur-ternaire-pour-laffichage-en-react\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/2025\/02\/12\/utilisation-de-loperateur-ternaire-pour-laffichage-en-react\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/2025\/02\/12\/utilisation-de-loperateur-ternaire-pour-laffichage-en-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/boissiebruno-pageperso-pi.ovh\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Utilisation de l’op\u00e9rateur ternaire pour l’affichage en React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/boissiebruno-pageperso-pi.ovh\/#website\",\"url\":\"https:\/\/boissiebruno-pageperso-pi.ovh\/\",\"name\":\"Le site du matou\",\"description\":\"Un site utilisant WordPress ma foi pas si mal fichu que \u00e7a\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/boissiebruno-pageperso-pi.ovh\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/boissiebruno-pageperso-pi.ovh\/#\/schema\/person\/d62778c4a9a9eb68b258ce862c5cb052\",\"name\":\"admin2154\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/boissiebruno-pageperso-pi.ovh\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/30bc2ae54660b3c6a84a10d6da54e19248e82ef919e0a33feae1adf7d6e0a9c6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/30bc2ae54660b3c6a84a10d6da54e19248e82ef919e0a33feae1adf7d6e0a9c6?s=96&d=mm&r=g\",\"caption\":\"admin2154\"},\"sameAs\":[\"http:\/\/boissiz.cluster029.hosting.ovh.net\"],\"url\":\"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/author\/admin2154\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Utilisation de l'op\u00e9rateur ternaire pour l'affichage en React - Le site du matou","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:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/2025\/02\/12\/utilisation-de-loperateur-ternaire-pour-laffichage-en-react\/","og_locale":"fr_FR","og_type":"article","og_title":"Utilisation de l'op\u00e9rateur ternaire pour l'affichage en React - Le site du matou","og_description":"Utilisation de l’op\u00e9rateur ternaire pour l’affichage en React L’op\u00e9rateur ternaire est une mani\u00e8re tr\u00e8s pratique…","og_url":"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/2025\/02\/12\/utilisation-de-loperateur-ternaire-pour-laffichage-en-react\/","og_site_name":"Le site du matou","article_published_time":"2025-02-12T21:02:15+00:00","article_modified_time":"2025-06-07T12:32:39+00:00","author":"admin2154","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"admin2154","Dur\u00e9e de lecture estim\u00e9e":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/2025\/02\/12\/utilisation-de-loperateur-ternaire-pour-laffichage-en-react\/","url":"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/2025\/02\/12\/utilisation-de-loperateur-ternaire-pour-laffichage-en-react\/","name":"Utilisation de l'op\u00e9rateur ternaire pour l'affichage en React - Le site du matou","isPartOf":{"@id":"https:\/\/boissiebruno-pageperso-pi.ovh\/#website"},"datePublished":"2025-02-12T21:02:15+00:00","dateModified":"2025-06-07T12:32:39+00:00","author":{"@id":"https:\/\/boissiebruno-pageperso-pi.ovh\/#\/schema\/person\/d62778c4a9a9eb68b258ce862c5cb052"},"breadcrumb":{"@id":"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/2025\/02\/12\/utilisation-de-loperateur-ternaire-pour-laffichage-en-react\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/2025\/02\/12\/utilisation-de-loperateur-ternaire-pour-laffichage-en-react\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/2025\/02\/12\/utilisation-de-loperateur-ternaire-pour-laffichage-en-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/boissiebruno-pageperso-pi.ovh\/"},{"@type":"ListItem","position":2,"name":"Utilisation de l’op\u00e9rateur ternaire pour l’affichage en React"}]},{"@type":"WebSite","@id":"https:\/\/boissiebruno-pageperso-pi.ovh\/#website","url":"https:\/\/boissiebruno-pageperso-pi.ovh\/","name":"Le site du matou","description":"Un site utilisant WordPress ma foi pas si mal fichu que \u00e7a","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/boissiebruno-pageperso-pi.ovh\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/boissiebruno-pageperso-pi.ovh\/#\/schema\/person\/d62778c4a9a9eb68b258ce862c5cb052","name":"admin2154","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/boissiebruno-pageperso-pi.ovh\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/30bc2ae54660b3c6a84a10d6da54e19248e82ef919e0a33feae1adf7d6e0a9c6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/30bc2ae54660b3c6a84a10d6da54e19248e82ef919e0a33feae1adf7d6e0a9c6?s=96&d=mm&r=g","caption":"admin2154"},"sameAs":["http:\/\/boissiz.cluster029.hosting.ovh.net"],"url":"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/author\/admin2154\/"}]}},"_links":{"self":[{"href":"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/wp-json\/wp\/v2\/posts\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":2,"href":"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/wp-json\/wp\/v2\/posts\/18\/revisions"}],"predecessor-version":[{"id":55,"href":"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/wp-json\/wp\/v2\/posts\/18\/revisions\/55"}],"wp:attachment":[{"href":"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/wp-json\/wp\/v2\/media?parent=18"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/wp-json\/wp\/v2\/categories?post=18"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/boissiebruno-pageperso-pi.ovh\/index.php\/wp-json\/wp\/v2\/tags?post=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}