Question 179343 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Update or re render react component to show immediate effect

How to show the SideNavbar Component change when the user has logged in.
The sidenavbar shows different component on the basis of usertype where usertype can be admin or student.
The component only changes once i reload.
The component changed the items in navbar after i reload but how do i make the navbar change without needing to reload?

I have tried using window.location.reload() which is probably not right.

import React,{useContext, useEffect, useState} from 'react'
import { NavLink } from 'react-router-dom'
import { SideNavItems } from './SideMenuItems'
import '../Styles/SideNavbar.css'
import UserContext from '../../context/user/UserContext'

export default function SideNavbar({children}) {
    const [isOpen, setIsOpen] = useState(false);
    const toggleClass = ()=>setIsOpen(!isOpen);

    const context = useContext(UserContext);
    const {userinfo, fetchUserinfo} =  context;

    useEffect(()=>{
        fetchUserinfo();
        //window.location.reload();
    },[])

    let isAdmin = false;
    if(userinfo.usertype === 'Admin'){
        isAdmin = true;
   
    }

    let isStudent = false;
    if(userinfo.usertype === 'Student'){
        isStudent = true;
    }

    return (
    <div className='side-container'>
        <div className='side-bar' style={{width: isOpen?'12rem':'3.5rem'}}>
            
            {
                isAdmin && (
                SideNavItems.Admin.map((item,index)=>(
                <NavLink to={item.url}  key={index} className={item.cName} >
                    <i className={item.icon}></i>
                    <div className='link-text' 
                    style={
                    {
                        display: isOpen ? 'block':'none',
                    }
                }
                    >{item.title}</div>
                </NavLink>
                ))
                )
            }

            {
                isStudent && (
                SideNavItems.Student.map((item,index)=>(
                <NavLink to={item.url}  key={index} className={item.cName} >
                    <i className={item.icon}></i>
                    <div className='link-text' 
                    style={
                    {
                        display: isOpen ? 'block':'none',
                    }
                }
                    >{item.title}</div>
                </NavLink>
                ))
                )
            }

            {
                !isAdmin && !isStudent && (
                    <span></span>
                )
            }

        </div>
        <div>{children}</div>
    </div>
    )
}
Tags:

2

Answers


  1. 0

    Try using this:

    useEffect(() => {
    // this will trigger component update when the user info changes
    setIsOpen(false);
  }, [userinfo]);
    Login or Signup to reply.
  2. 0

    Maybe maintain a state which determines the type of layout you want to use.
    Example:

     const [userType, setUserType] = useState('Student');

 useEffect(()=>{
       setUserType(userinfo?.usertype || 'Student')
 },[userinfo])

    And in your render function use the state variable userType

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search