seance12 1 cours

Vous allez remarquer que après le clic sur le bouton le message Bien Venu visiteur change pour devenir votre inscription est effectuée, le texte de bouton inscription change pour devenir merci

AutreMessage.js import React, { useState } from "react"; export default function AutreMessage() { const [message, setMessage] = useState("Bien venu visiteur"); const [btnMessage, setBtnMessage] = useState("inscription"); function inscription() { setMessage("votre inscription est effectuée"); setBtnMessage("merci");

App.js Le fichier App est créer directement dans le dossier src import React from 'react' import AutreMessage from './components/AutreMessage'; export default function App() { return ( <div> <AutreMessage/> </div>

index.js import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; const root=ReactDOM.createRoot(document.getElementById("root")) root.render(<App/>);

explication du code de composant fonctionnel AutreMessage Pour utiliser le Hook useState il faut l’importer import React, { useState } from "react";

Pour cet exemple on a besoin de gérer l’état de message et le texte du bouton. const [message, setMessage] = useState("Bien venu visiteur");

Le hook useState est une fonction fournie par REACT qui vous permet d’ajouter les fonctionnalités de React dans votre composant fonctionnel. Le hook useState est une fonction qui retourne un Array contenant deux éléments Le premier élément c’est la propriété message que l’on peut utiliser dans le composant fonctionnel, la propriété message est initialisée par l’argument de la fonction useState, dans ce cas message est initialisé par "Bien venu visiteur".

Le deuxième élément retourné c’est la fonction setMessage. la méthode setMessage permet de changer la valeur de la propriété message puis lance un rafraîchissement de user interface.