Proper react component not showing based on the type of user

Question

I am having some issues in displaying a separate component based on the type of user.

Detailed Explanation of what I am trying to achieve:

The code snippet where I am having issues is as follows:

const addDataRequest = this.state.addDataRequestVisible ? (
            <div className="main-page-section">
               
                <Growl ref={this.growl}/>
                {isAdmin(user)? (
                
                <AdminDataRequestEnhancedForm handleSubmit={this.handleSubmit} addProject={this.addProjectOpen} onCancel={this.handleCancel}/>
               
                ) : (
               <DataRequestEnhancedForm handleSubmit={this.handleSubmit} addProject={this.addProjectOpen} onCancel={this.handleCancel}/>
                )
              }
            </div>
        ) : null;
    

Right now, DataRequestFormJS andAdminDataRequestForm are exact same forms as far as form content is concerned. So based on the user role, if it's an Admin, I want to display AdminDataRequestEnhancedForm component and if it's not an Admin, I want to display DataRequestEnhancedForm component. But even though, I have specific checks for isAdmin in place, as shown in the code snippet above, it's not displaying AdminDataRequestEnhancedForm component for an Admin user. I am wondering what's wrong I am doing? Does it have something to do with the state variable -this.state.addDataRequestVisible?

Here is the complete code:

import {DataRequestEnhancedForm} from "./DataRequestFormJS";
import {AdminDataRequestEnhancedForm} from "./AdminDataRequestForm";
import {isAdmin} from './auth';

class DataRequest extends React.Component<any, any> {
    private growl = React.createRef<Growl>();

    constructor(props) {
        super(props);
       
        this.state = {
            result: '',
            addDataRequestVisible: false,
            addProjectVisible: false,
            //For admin specific
            addAdminDataRequestVisible: false,
            addAdminProjectVisible: false
        };

        this.handleSubmit = this.handleSubmit.bind(this)
        this.handleCancel = this.handleCancel.bind(this)
        this.addProjectOpen = this.addProjectOpen.bind(this)
        this.addProjectClose = this.addProjectClose.bind(this)
    }

    handleSubmit = (values) => {

       let responseData = []
        axios.post('upms/saveData', {
            
        }).then((response) => {
            console.log('response', response)
            responseData = response.data

            this.setState({
                addDataRequestVisible: false,
                dataRequestFormVisible: false,
                dataRequestGridVisible: true,
                selectedDataRequest: []
            }, () => {
                this.growl.current.show({
                    severity: 'success',
                    summary: 'Save Successful',
                    detail: 'Data Request has been created'
                })
            })
        }).catch((err) => {
            this.growl.current.show({
                severity: 'error',
                summary: 'Save Unsuccessful',
                detail: 'Could not add Data Request'
            })
        })
    }

    handleCancel = event => {
        console.log('In handleCancel....')
        if (event) {
            this.setState({ addDataRequestVisible: false})
        }
    }

    addProjectOpen = event =>{
        if (event) {
            this.setState({ addProjectVisible: true})
        }
    }

    addProjectClose = event =>{
        console.log('In addProjectClose....' + event)
        if (event) {
            this.setState({ addProjectVisible: false})
        }
    }

    render() {
        const user = JSON.parse(sessionStorage.getItem('loggedInUser'))
        let url = isAdmin(user) ? 'url1' : 'api/personnels/' + user.id + '/url2'

        const defaultView = this.state.addDataRequestVisible?null: (
            <div className="data-request-main-section">
                <Growl ref={this.growl}/>
                <div className="page-title-section">            
                <Button label="New Data Request" icon="pi pi-plus" className="new-data-req-btn"
                        onClick={(e) => this.setState({ addDataRequestVisible: true})}/>
            </div>
                <DataRequestsDataTable url={url} handleSubmit={this.handleSubmit}/>
            </div>

        )

       
         
        

        const addDataRequest = this.state.addDataRequestVisible ? (
            <div className="main-page-section">
               
                <Growl ref={this.growl}/>
                {isAdmin(user)? (
                
                <AdminDataRequestEnhancedForm handleSubmit={this.handleSubmit} addProject={this.addProjectOpen} onCancel={this.handleCancel}/>
               
                ) : (
               <DataRequestEnhancedForm handleSubmit={this.handleSubmit} addProject={this.addProjectOpen} onCancel={this.handleCancel}/>
                )
              }
            </div>
        ) : null;
       


        const addProjectDialog = this.state.addProjectVisible ? (
            <Dialog visible={true} modal={true} className="add-project-popup"
                    onHide={() => this.setState({addProjectVisible: false})}>
                <div style={{textAlign: 'center'}}>
                    <h3>Add New Project</h3>
                    <AddNewProjectForm closeProject={this.addProjectClose} />
                </div>
            </Dialog>
        ) : null

        return (
            <div className="datareq-page">
                {defaultView}
                {addDataRequest}
                {addProjectDialog}
            </div>
        );
    }
}

export default DataRequest

My auth.js looks like following:

export const isAdmin = (user) => {
    return JSON.parse(sessionStorage.assignees).some(assignee => assignee.id === user.id)
}

Answer 1

It seems like your function isAdmin doesn't return the result directly and by the time it finishes executing DataRequestEnhancedForm will have been rendered instead. Try making that isAdmin function asynchronous like this:

export const isAdmin = async (user) => {

    let userType = await JSON.parse(sessionStorage.assignees).some(assignee => assignee.id === user.id)
 
    return userType

}