How can I render in my column names conditionally AFTER the list is pulled from my backend?

user_14290998 0
Viewed 116

I have an error that I would like to be displayed if an unauthorized user makes a certain request. I want an admin to be the only one to be able to view this screen (Screen to remove users from DB). That part is working correctly, but it is displaying the text that acts as the title for each column (ID, Username, Email) all bunched up when I only want the unauthorized message to appear (For unauthorized users). How can I fix this issue?

BoardAdmin.jsx:

import React, {useState, useEffect} from 'react';
import UserService from '../../services/user.service';
import './styles/BoardAdmin.css';
const BoardAdmin = () => {
    const [content, setContent] = useState('');
    const [users, setUsers] = useState([]);
    useEffect(() => {
        UserService.getAdminBoard().then(
            (response) => {
                setUsers(response.data);
                // console.log(response.data);
            },
            (error) => {
                const _content =
                    (error.response &&
                        error.response.data &&
                        error.response.data.message) ||
                    error.message ||
                    error.toString();
                setContent(_content);
            }
        );
    }, []);
    return (
        <div className='page'>
            <header className='jumbotron'>
                <div className='column-names'>
                    <p>{content}</p>
                    <p className='user-id-column'>User ID</p>
                    <p className='username-column'>Username</p>
                    {/* <p>User Role</p> */}
                    <p className='user-email-column'>Email</p>
                </div>
                {users.map((user) => (
                    <ul className='user-list'>
                        <li class='user'>
                            <div>
                                <div class='info'>
                                    <span class='user-id'>{user.id}</span>
                                    <span class='name'>{user.username}</span>
                                    <span class='role'>{user.role}</span>
                                    <span class='email'>{user.email}</span>
                                    <img class='remove' src='https://i.imgur.com/CemzWSg.png' />
                                </div>
                            </div>
                            <div class='expand'></div>
                        </li>
                    </ul>
                ))}
            </header>
        </div>
    );
};
export default BoardAdmin;

enter image description here

react-hooks reactjs javascript
1 Answers

You can fix it by adding a rendering condition with content (your error message) in front of the columns' names.

If it has no error message (content is empty), you will render columns. Otherwise, you just render content as an error message display

{!content && <>
   <p className='user-id-column'>User ID</p>
   <p className='username-column'>Username</p>
   {/* <p>User Role</p> */}
   <p className='user-email-column'>Email</p>
</>}

Along with it, I'd suggest that you should have a loading state to know when your requests completed for a suitable rendering

const [isLoading, setIsLoading] = useState(true) //initially, it's loading

And then set loading state

useEffect(() => {
        UserService.getAdminBoard().then(
            (response) => {
                setUsers(response.data);
                setIsLoading(false); //the request is completed
                // console.log(response.data);
            },
            (error) => {
                const _content =
                    (error.response &&
                        error.response.data &&
                        error.response.data.message) ||
                    error.message ||
                    error.toString();
                setContent(_content);
                setIsLoading(false); //the request is completed
            }
        );
}, []);

During the waiting period of the request, you can render a loading component instead

//TODO: You can modify this loading rendering according to your UI
if(isLoading) {
  return <div className='page'>Loading...</div>
}

Full possible change

import React, {useState, useEffect} from 'react';
import UserService from '../../services/user.service';
import './styles/BoardAdmin.css';
const BoardAdmin = () => {
    const [content, setContent] = useState('');
    const [users, setUsers] = useState([]);
    const [isLoading, setIsLoading] = useState(true); //initially, it's loading
    useEffect(() => {
        UserService.getAdminBoard().then(
            (response) => {
                setUsers(response.data);
                setIsLoading(false); //the request is completed
                // console.log(response.data);
            },
            (error) => {
                const _content =
                    (error.response &&
                        error.response.data &&
                        error.response.data.message) ||
                    error.message ||
                    error.toString();
                setContent(_content);
                setIsLoading(false); //the request is completed
            }
        );
    }, []);

    //TODO: You can modify this loading rendering according to your UI
    if(isLoading) {
       return <div className='page'>Loading...</div>
    }

    return (
        <div className='page'>
            <header className='jumbotron'>
                <div className='column-names'>
                    <p>{content}</p>
                    {!content && <>
                       <p className='user-id-column'>User ID</p>
                       <p className='username-column'>Username</p>
                       {/* <p>User Role</p> */}
                       <p className='user-email-column'>Email</p>
                    </>}
                </div>
                {users.map((user) => (
                    <ul className='user-list'>
                        <li class='user'>
                            <div>
                                <div class='info'>
                                    <span class='user-id'>{user.id}</span>
                                    <span class='name'>{user.username}</span>
                                    <span class='role'>{user.role}</span>
                                    <span class='email'>{user.email}</span>
                                    <img class='remove' src='https://i.imgur.com/CemzWSg.png' />
                                </div>
                            </div>
                            <div class='expand'></div>
                        </li>
                    </ul>
                ))}
            </header>
        </div>
    );
};
export default BoardAdmin;
user_92015870
Related