How to show the correct component according to the user types

Question

I have two different user type in my react project normal user and admin but to specify that I am not using any database. So I connect metamask wallet and I am getting and the wallet (you can think as an Id) and if the wallet is equal something it is admin, otherwise it is normal user. in localStorage I am keeping if the admin is true or false and according to that I want to show or . But first there is something wrong with my if statement, because all the time it shows (even in localStorage admin is false) and second it is not real time rendering. So what I am expecting, when the user type is changed, it the project rerenders and show the correct component. Here is my component:

import React, { useEffect } from "react";
import { Container, Row, Col } from "react-bootstrap";
import Twitch from "../Twitch/Twitch";
import AdminGame from "./AdminGame";
import "./Game.css";
import UserGame from "./UserGame";

const Game = () => {
  useEffect(() => {
    if (
      localStorage.getItem("walletId") ==
      ""
    ) {
      localStorage.setItem("admin", true);
    } else {
      localStorage.setItem("admin", false);
    }
  }, [localStorage.getItem("walletId")]);
  return (
    <section id="game">
      <Container>
        <Row>
          <Col>
            {localStorage.getItem('admin') ? <UserGame /> : <AdminGame/>}
          </Col>
        </Row>
      </Container>
    </section>
  );
};

export default Game;

Container and Row tags are React Bootstrap based so dont worry about them. But I wonder rest of my logic is correct and why it doesnt rerender.

Answer 1

you should do JSON.parse so that your evaluation is correct.

{JSON.parse(localStorage.getItem("admin")) ? <AdminGame /> : <UserGame />}