La gestion de l’état dans les applications ReactJS peut rapidement devenir complexe, surtout lorsqu’il s’agit de rendre interactifs des éléments comme des images.
Une mauvaise gestion de cet état peut entraîner des interfaces peu réactives et une mauvaise expérience utilisateur, rendant vos applications plus difficiles à maintenir.
Grâce au hook useState, vous pouvez facilement gérer l’état de vos composants et ajouter des fonctionnalités dynamiques. Cet article vous guide étape par étape pour créer une interface permettant d’afficher ou de masquer une image en toute simplicité.
Exercice pratique : Utilisation de hook useState Reactjs
On va travailler ensemble sur un deuxième exercice pour bien assimiler les connaissances que nous avons acquises jusqu’à présent concernant le hook useState Reactjs. L’exercice consiste à afficher deux éléments d’état : une image et un bouton. Lorsque l’utilisateur arrive sur notre page, on lui montre une image par défaut et un bouton pour lui permettre de choisir s’il souhaite masquer ou afficher l’image. Je vous invite à découvrir l’image ci-dessous :
Vous comprenez l’objectif sur ce deuxième exercice, passons alors à l’implémentation de notre code.
Affichage des états avec le hook useState Reactjs
On s’intéresse tout d’abord à l’affichage de l’image et le bouton. Du coup créons maintenant le composant image :
src/component/image .js
import '../styles/image.css'
import React, { useState } from 'react';
export default function Image() {
return(
<section>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E"/ width="" height="" data-lazy-src="image2.jpg"><noscript><img decoding="async" src="image2.jpg"/ width="" height=""></noscript>
<button>Voir/cacher</button>
</section>
)
}
Et puis on ajoute un peu de css pour bien ajouter une mise en page sur notre affichage.
Donc, créons le fichier image.css dans le dossier src/styles/image.css
section button{
display: block;
margin-toprgin: auto;
margin-top: 20px;
padding: 7px 15px;
border-radius :5px;
border : none;
background-color : #000;
color: #ccc;
cursor: pointer;
}
section button:hover {
background-color :#ccc;
color : #000;
}
Formation React 18 - Maîtriser la Création d'Interfaces Interactives
Dominez la création d'interfaces modernes avec React 18 et ses nouvelles fonctionnalités!
Mise en place des états avec useState
Maintenant, on passe au principal objectif de notre exercice. Regardons la modification dans notre composant.
import {useState} from 'react';
import '../styles/image.css'
export default function Image() {
const [voir,setVoir] = useState(true)
const [ bt,setBt] = useState('cacher')
function afficher(){
setVoir(!voir)
if(bt == 'cacher'){
setBt('voir')
}else{
setBt('cacher')
}
}
return(
<section>
{
(voir)?
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E"/ width="" height="" data-lazy-src="image2.jpg"><noscript><img decoding="async" src="image2.jpg"/ width="" height=""></noscript> : null
}
<button onClick = {afficher}>{bt}</button>
</section>
)
}
const [voir, setVoir] =useState(true) : Déclare une variable d’état (voir) en utilisant le hook useState Reactjs avec une valeur initiale de true. La fonction setVoir est utilisée pour mettre à jour cet état.
const [bt, setBt] = useState('cacher') : Déclare une autre variable d’état (bt) avec une valeur initiale de 'cacher'. La fonction setBt sera utilisée pour mettre à jour cet état.
La fonction afficher() est définie pour basculer l’état de voir et mettre à jour l’état de bt en fonction de l’état précédent. Si bt est égal à 'cacher', il sera mis à 'voir', et vice versa.
Le composant rend une section (<section>) contenant conditionnellement une balise <img> avec la source "image2.jpg" en fonction de l’état de voir.
<button onClick={afficher}>{bt}</button> : Rend un bouton qui, lorsqu’il est cliqué, appelle la fonction afficher(). Le texte du bouton est défini par la variable d’état bt, qui est mise à jour dans la fonction afficher()
Voilà ce qui s’affiche sur notre navigateur si tout fonctionne bien :
Et vous pouvez la cacher en cliquant le bouton :
Voilà, on a terminé notre exercice avec succès.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui. Découvrez des cours variés pour tous les niveaux !
Conclusion
En réalisant cet exercice useState ReactJS, vous avez pu comprendre en profondeur comment manipuler l’état d’une application en utilisant ce hook essentiel. Ce type d’exercice pratique est un excellent moyen d’acquérir les réflexes nécessaires pour développer des interfaces dynamiques et interactives avec ReactJS. Continuez à explorer et à pratiquer afin de maîtriser parfaitement la gestion des états dans vos projets React.
