Comment implémenter le rendu conditionnel dans les composants React ?

[alfranz]

e travaille sur un projet de développement Web à l'aide de ReactOS et je rencontre des difficultés pour implémenter le rendu conditionnel dans mes composants React. Je souhaite afficher ou masquer conditionnellement certains éléments en fonction de l'état ou des accessoires de mes composants.

Par exemple, disons que j'ai un composant React simple qui affiche un bouton "Connexion" lorsque l'utilisateur n'est pas connecté et affiche un bouton "Déconnexion" lorsque l'utilisateur est connecté. J'ai essayé d'utiliser une instruction de base if/else , mais cela ne semble pas fonctionner comme prévu.

Voici ce que j'ai essayé jusqu'à présent :

Code

import React, { useState } from 'react';

const AuthButton = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
  };

  if (isLoggedIn) {
    return <button onClick={handleLogout}>Logout</button>;
  } else {
    return <button onClick={handleLogin}>Login</button>;
  }
};

Malheureusement, le bouton ne change pas d'état lorsque je clique dessus. Je soupçonne qu'il me manque peut-être quelque chose dans mon approche.

Bien que j'aie demandé de l'aide ici sur la feuille de route du développement Web, mais j'ai du mal à la comprendre. Quelqu'un pourrait-il me conseiller gentiment sur la façon de créer correctement un rendu conditionnel dans ReactOS? Existe-t-il une meilleure approche ou une approche suggérée pour faire face à cette situation ? Toute aide ou extrait de code serait très apprécié. Je suis reconnaissant.