How can I make useEffect not return the initial value? I keep getting empty array when I'm trying to pass an array of objects into a component

Question

I'm trying to pass in an array of registered users into a component, however I can't because it always renders the initial empty array before actually rendering the correct content. I've tried using useRef and it still does not work.

const Home = () => {
const nav = useNavigate()

const [userList, setUserList] = useState([]);
const [loggedInUser, setLoggedInUser] = useState({});
const [currentChat, setCurrentChat] = useState(undefined);
const [showMenu, setShowMenu] = useState(false);
useEffect(() => {       
    const setLoggedIn = async() => {
        if (!localStorage.getItem('loggedInUser')) {

            nav('/');
        } else {
            setLoggedInUser(await JSON.parse(localStorage.getItem('loggedInUser')))
        }
    }

    setLoggedIn().catch(console.error);
}, [])

useEffect(() => {
        const fetchUsers = async () => {

            const data = await axios.get(`${allUsersRoute}/${loggedInUser._id}`);
            setUserList(data.data);
        }

        fetchUsers().catch(console.error);
}, [loggedInUser._id])

console.log(userList);

return (
    <div id='container'>

        <div id='sidebar'>
            <div>
                <div id='home-header'>
                    <h1>DevsHelp</h1>
                </div>

                <Userlist props={userList}/>
            </div>
        </div>
    )};

And here is the component I'm trying to render.

const Userlist = (props) => {

return (
        <div>
            <div id='home-header'>
                <h1>DevsHelp</h1>
            </div>

            <div id='userlist'>
                {props.map((prop) => {
                    {console.log(props.length)}
                    return (
                        <div className='user'>
                            <h3>{prop.username}</h3>
                        </div>
                    )
                })}
            </div>
        </div>
)}
export default Userlist;

So basically, react returns .map is not a function, and I assume it's because the array goes in empty. I'm fairly new to React, so if anyone could help me, I would greatly appreciate it. Thanks!

Answer 1

The problem is that you are mapping over the props object, not the userList. Try to do the following:

const Userlist = (props) => {

return (
        <div>
            <div id='home-header'>
                <h1>DevsHelp</h1>
            </div>

            <div id='userlist'>
                // use props.users.map instead of props.map
                {props.users.map((user) => {

                    return (
                        <div className='user'>
                            <h3>{user.username}</h3>
                        </div>
                    )
                })}
            </div>
        </div>
)}
export default Userlist;

and at Home component change the props of UserList to users, just to avoid confusion

<Userlist users={userList}/>