Afficher composant selon condition sous react

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

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

    0