https://cegepmv.github.io/420-211/3-apps-dynamiques/4-rendu-conditionnel/index.htmlDans une application dynamique React, il est possible d’afficher du contenu sur la page en fonction de la valeur d’un state, en utilisant la technique du rendu conditionnel (conditionnal rendering). Rendu conditionnel avec && ​ App.jsx Joke.jsx jokesData.js import Joke from "./components/Joke" import jokesData from "/src/assets/jokesData" export default function App() { const jokeElements = jokesData.map(joke => { return ( <Joke key={joke.id} setup={joke.question} punchline={joke.punchline} /> ) }) return ( <div> {jokeElements} </div> ) } import {useState} from "react" export default function Joke(props) { const [isShown, setIsShown] = useState(false) function toggleShown() { setIsShown(prevShown => !prevShown) } return ( <div> {props.setup && <h3>{props.setup}</h3>} {isShown && <p>{props.punchline}</p>} <button onClick={toggleShown}>Show punchline</button> <hr /> </div> ) } export default [ { id: 1, question: "Que demande un zéro à un huit ?", punchline: "T'as mis une ceinture ?" }, { id: 2, question: "Pourquoi les souris n'aiment pas jouer aux devinettes ?", punchline: "Parce qu'elles ont peur de donner leur langue au chat !" }, { id: 3, question: "Pourquoi est-ce que les éléphants ne peuvent pas utiliser d'ordinateurs ?", punchline: "Parce qu'ils ont peur de la souris !" }, { id: 4, question: "Quel est le légume le plus explosif ?", punchline: "La grenade !" }, { id: 5, question: "Quel est le comble pour un électricien ?", punchline: "D'avoir les idées noires !" }, { id: 6, question: "Quel est le comble pour un vélo ?", punchline: "C’est de perdre les pédales !" }, ] Exercice 1 Modifiez le composant App() ci-dessous pour afficher le <h1> uniquement si le state unreadMessages n’est pas vide :Hugofr-fr