Afficher composant selon condition sous react

papadinosaure Messages postés 7 Date d'inscription mercredi 13 juillet 2022 Statut Membre Dernière intervention 11 octobre 2022 - 11 oct. 2022 à 18:39
papadinosaure Messages postés 7 Date d'inscription mercredi 13 juillet 2022 Statut Membre Dernière intervention 11 octobre 2022 - 11 oct. 2022 à 20:20

Bonjour,

Je souhaite créer une page qui retourne un composant plutôt qu'un autre selon si j'ai un tableau d'objet dans mon sessionStorage.

J'ai essayé différentes conditions, rien ne marche, pouvez-vous m'aider svp.

import React from 'react';
import Log from '../components/Log';
import Thread from "../components/Thread";
import {useEffect,useState} from 'react';


export default function Home(){

    const [homeLog, setHomeLog] = useState(false);
    const [homePost, setHomePost] = useState(false);

//Est-ce que le sessionStorage contient un utilisateur ?
useEffect(()=>{ 
var isUserConnected =sessionStorage.getItem("state");

// Si oui alors on affiche le composant Thread associé à l'état homePost
if(isUserConnected!==undefined){
    setHomeLog(false);
    setHomePost(true);
}// Si non alors on affiche le composant Log associé à l'état homeLog
else if(isUserConnected === undefined){
    setHomeLog(true);
    setHomePost(false);
}
  }, []);

    return (
        <>
        <div className="home">
        </div>
        <div className="main">
           {homeLog && <Log/>}
           {homePost && <Thread/>}
        </div>
        </>
    );
};


Windows / Firefox 105.0

1 réponse

papadinosaure Messages postés 7 Date d'inscription mercredi 13 juillet 2022 Statut Membre Dernière intervention 11 octobre 2022
11 oct. 2022 à 20:20

Bon apparemment il faut utiliser null à la place de undefined et puis retourner seulement {isUserConnected!==null ? <Thread/> : <Log/>} semble plus court.

0