{"id":5992,"date":"2024-10-12T09:24:12","date_gmt":"2024-10-12T09:24:12","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/conditions-ternaires-afficher-contenu-react\/"},"modified":"2024-10-12T09:24:17","modified_gmt":"2024-10-12T09:24:17","slug":"conditions-ternaires-afficher-contenu-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/conditions-ternaires-afficher-contenu-react\/","title":{"rendered":"8.1 Conditions Ternaires pour Afficher du Contenu en React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Conditions Ternaires Contenu React<\/strong> sont une m\u00e9thode puissante pour manipuler dynamiquement le contenu affich\u00e9 en fonction de conditions sp\u00e9cifiques. Comprendre et utiliser correctement les <strong>conditions ternaires en React<\/strong> peut grandement am\u00e9liorer l&rsquo;interactivit\u00e9 de vos composants. Apprenons comment cela fonctionne et comment les impl\u00e9menter via des exemples pratiques de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Conditions Ternaires Contenu React<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/706095528?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n\n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Les conditions ternaires en React, inspir\u00e9es de JavaScript, offrent un moyen concis de repr\u00e9senter des conditions et de contr\u00f4ler la logique d&rsquo;affichage des composants, tout en optimisant vos interfaces utilisateur. Dans React, les <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">conditions ternaires<\/a> permettent de g\u00e9rer les \u00e9tats d\u2019affichage en temps r\u00e9el.<\/p>\n\n\n\n<p>Un exemple classique de condition ternaire est l&rsquo;affichage d&rsquo;un message de connexion ou de d\u00e9connexion bas\u00e9 sur l&rsquo;\u00e9tat de l&rsquo;utilisateur. Entrons dans l&rsquo;apprentissage de leur utilisation gr\u00e2ce \u00e0 des exemples pratiques :<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Basique des Conditions Ternaires<\/h3>\n\n\n\n<p>La syntaxe des <strong>conditions ternaires en React<\/strong> est ainsi : <code>condition ? expressionSiVrai : expressionSiFaux<\/code>. Cela permet de d\u00e9cider rapidement quel contenu afficher sans avoir recours \u00e0 des blocs <code>if-else<\/code>. Pour approfondir votre compr\u00e9hension, vous pouvez consulter cet article sur <a href=\"https:\/\/wikiform.fr\/codespace\/conditions-if-else-afficher-contenu-react\" target=\"_blank\" rel=\"noopener\">les alternatives aux ternaires<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>import React from 'react';\n\nfunction UserGreeting({ isLoggedIn }) {\n  return (\n    <div>\n      {isLoggedIn ? (\n        <h1>Bienvenue de retour !<\/h1>\n      ) : (\n        <h1>Veuillez vous connecter<\/h1>\n      )}\n    <\/div>\n  );\n}\n\nexport default UserGreeting;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Imbrication des Conditions Ternaires<\/h3>\n\n\n\n<p>On peut \u00e9galement imbriquer les <strong>conditions ternaires<\/strong> pour g\u00e9rer des cas complexes. Toutefois, utiliser cette m\u00e9thode avec pr\u00e9caution pour maintenir la clart\u00e9 du code. Pour des projets complexes, il peut \u00eatre pertinent de se r\u00e9f\u00e9rer aux <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-react-fragments-utiliser\" target=\"_blank\" rel=\"noopener\">fragments de React<\/a> afin d&rsquo;optimiser la structure de votre composant.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>import React from 'react';\n\nfunction UserProfile({ user }) {\n  return (\n    <div>\n      {user ? (\n        <div>\n          <h1>{`Bonjour, ${user.name}`}<\/h1>\n          {user.isAdmin ? <p>Vous avez des privil\u00e8ges administratifs<\/p> : null}\n        <\/div>\n      ) : (\n        <h1>Utilisateur non trouv\u00e9<\/h1>\n      )}\n    <\/div>\n  );\n}\n\nexport default UserProfile;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Conditions Ternaires et JSX<\/h3>\n\n\n\n<p>Les <strong>conditions ternaires<\/strong> s&rsquo;int\u00e8grent harmonieusement avec JSX, permettant une int\u00e9gration propre de la logique conditionnelle \u00e0 travers votre structure de composants. Pour optimiser cette int\u00e9gration, il est utile de ma\u00eetriser l&rsquo;utilisation des <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-javascript-dans-jsx-react\" target=\"_blank\" rel=\"noopener\">fonctions JavaScript au sein de JSX<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>import React from 'react';\n\nfunction Message({ isAdmin, unreadCount }) {\n  return (\n    <div>\n      <h1>{`Bonjour ${isAdmin ? 'Admin' : 'Utilisateur'}`}<\/h1>\n      <h2>\n        {unreadCount > 0\n          ? `Vous avez ${unreadCount} messages non lus`\n          : `Pas de nouveaux messages`}\n      <\/h2>\n    <\/div>\n  );\n}\n\nexport default Message;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Limitations des Conditions Ternaires<\/h3>\n\n\n\n<p>Bien que les <strong>conditions ternaires<\/strong> permettent d&rsquo;\u00e9crire du code concis, elles peuvent devenir complexes \u00e0 g\u00e9rer lorsqu&rsquo;elles sont imbriqu\u00e9es excessivement. Pensez \u00e0 utiliser des fonctions pour extraire des conditions complexes afin d&rsquo;am\u00e9liorer la lisibilit\u00e9. Tout en d\u00e9couvrant <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\" target=\"_blank\" rel=\"noopener\">les Hooks de React<\/a>, envisagez d&rsquo;utiliser des Hooks personnalis\u00e9s pour g\u00e9rer une logique complexe.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>import React from 'react';\n\nfunction determineGreeting(isMorning, isEvening) {\n  return isMorning ? \"Bonjour!\" : isEvening ? \"Bonsoir!\" : \"Bonne journ\u00e9e!\";\n}\n\nfunction Greeting({ isMorning, isEvening }) {\n  return (\n    <div>\n      <h1>{determineGreeting(isMorning, isEvening)}<\/h1>\n    <\/div>\n  );\n}\n\nexport default Greeting;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion<\/h3>\n\n\n\n<p>Les <strong>conditions ternaires en React<\/strong> offrent une m\u00e9thode flexible pour un contr\u00f4le conditionnel du contenu dans vos composants. Elles sont essentielles pour un rendu dynamique bas\u00e9 sur l\u2019\u00e9tat des composants. En utilisant ces op\u00e9rateurs de mani\u00e8re judicieuse, vous am\u00e9liorez non seulement la performance mais \u00e9galement l&rsquo;\u00e9l\u00e9gance de votre code. Pour approfondir, explorez les <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-redux-pourquoi-utiliser\" target=\"_blank\" rel=\"noopener\">int\u00e9grations entre Redux et React<\/a> pour une gestion d&rsquo;application encore plus r\u00e9active et efficiente.<\/p>\n\n\n\n<a href=\"https:\/\/myreacttraining.com\/fullstack-react\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/myreacttraining.com\/assets\/react-course-offer.gif\" loading=\"lazy\" alt=\"Fullstack React Training Offer\" title=\"\"><\/a>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation REDUX ET REACT\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Conditions Ternaires Contenu React sont une m\u00e9thode puissante pour manipuler dynamiquement le contenu affich\u00e9 en fonction de conditions sp\u00e9cifiques. Comprendre et utiliser correctement les&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3185,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5992","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-et-redux","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5992","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5992"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5992\/revisions"}],"predecessor-version":[{"id":5993,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5992\/revisions\/5993"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3185"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5992"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5992"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5992"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}