скрыть или показать кнопку для аутентифицированного пользователя в реакции

Question

Я хочу показать кнопку «Стать репетитором», если 1. пользователь не вошел в систему. 2. зарегистрированный пользователь еще не является репетитором.

в противном случае я хочу показать кнопку «Tutor DashBoard». (для пользователя, который уже является наставником) код работает, но он показывает "Tutor DashBoard" для всех зарегистрированных пользователей, даже если они еще не являются наставником. Надеюсь, вы понимаете. вот код

 //BecomeTutor to show or hide
        const BecomeTutor=(props)=>{

            const user=localStorage.getItem('user')
            console.log("user:"+user);// this shows right user on console

              if(!user){
                return(  
                    <div>   
            <a  href="NewTutorForm" onClick={()=>onCreate()}><Button 
               variant="contained"
               color="primary" >Become a Tutor </Button></a>

                    </div>
                );}


                else{
            const check= props.tutorList.find(x=>x.UserId==user.id)
            console.log("tutorList:", props.tutorList);
            console.log("check:"+ check); // to show tutor on console

            if ( check ){
                return(  
                    <div>   
            <a  href="TutorDashBoard" onClick={()=>tutorDashBoard(check.UserId)}><Button 
               variant="contained"
               color="primary" >Tutor DashBoard </Button></a>

                    </div>
                );
                }
                else{
                    return(  
                        <div>   
                <a  href="NewTutorForm" onClick={()=>onCreate()}><Button 
                   variant="contained"
                   color="primary" >Become a Tutor </Button></a>

                        </div>
                    ); 
                }
            }

        }

значение пользователя на консоли:

user: {"id":6,"username":"fiazranjha","email":"fiazmianwal@gmail.com","role":"user","token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1bmlxdWVfbmFtZSI6IjYiLCJuYmYiOjE1OTA1ODM2MTMsImV4cCI6MTU5MTE4ODQxMywiaWF0IjoxNTkwNTgzNjEzfQ.J7JWakYMMAwZN02xwOOGBLsagFs_oGbqUAr1aWsGiIk"}

значение tutorList на консоли:

tutorList: [{…}]0: address: "1km mianwal road kuthiala sheikhan"category: "OnlineTutor"courses: []experience: "this is test"fullName: "fiaz ahmed"mobile: "03466469074"qualification: "test"tutorId: 2updatedOn: "2020-05-26T04:34:52.5088619"userId: 6username: "fiazranjha"whatsapp: "03466469074"__proto__: Objectlength: 1__proto__: Array(0)]

значение проверки на консоли

check: {tutorId: 2, fullName: "fiaz ahmed", username: "fiazranjha", userId: 6, mobile: "03466469074", …}address: "1km mianwal road kuthiala sheikhan"category: "OnlineTutor"courses: []experience: "this is test"fullName: "fiaz ahmed"mobile: "03466469074"qualification: "test"tutorId: 2updatedOn: "2020-05-26T04:34:52.5088619"userId: 6username: "fiazranjha"whatsapp: "03466469074"__proto__: Object}

Answer 1

Пожалуйста, замените

const check = props.tutorList.find(x => x.UserId == user.id)

на

const check = props.tutorList.find(x => x.userId == user.id)

, потому что tutorList содержит свойство userId, а не UserId. Также вам необходимо изменить следующий вызов функции

tutorDashBoard(check.UserId)

как

tutorDashBoard(check.userId)

Answer 2

обнаружил ошибку. Тип пользователя был строкой. Тип tutorList был объектом. console.log("user:",typeof(user)); изменил пользователя на объект на JSON.pars(). благодарен всем, особенно @Khabir, его указание на нижний регистр userId также было полезно. последующие изменения работали как шарм.

 //BecomeTutor to show or hide
        const BecomeTutor=(props)=>{

            const user=JSON.parse(localStorage.getItem('user'))
            console.log("user:",user);

              if(!user){
                return(  
                    <div>   
            <a  href="NewTutorForm" onClick={()=>onCreate()}><Button 
               variant="contained"
               color="primary" >Become a Tutor </Button></a>

                    </div>
                );}

                else{
            const check= {...props.tutorList.find(x=>x.userId==user.id)}
            console.log("tutorList:", props.tutorList); // to show
            console.log("check:",check); // to show

            if ( check.userId ){
                return(  
                    <div>   
            <a  href="TutorDashBoard" onClick={()=>props.tutorDashBoard(check.userId,check)}><Button 
               variant="contained"
               color="primary" >Tutor DashBoard </Button></a>

                    </div>
                );
                }
                else{
                    return(  
                        <div>   
                <a  href="NewTutorForm" onClick={()=>onCreate()}><Button 
                   variant="contained"
                   color="primary" >Become a Tutor </Button></a>

                        </div>
                    ); 
                }
            }

        }