Popular posts

import React, {useState, useEffect, useContext} from 'react';
import {AppContext} from '../contexts/context';
import axios from 'axios';
import AdminNavbar from './AdminNavbar';
import UserList from './UserList';
import {RiUserSearchLine, RiAddLine} from 'react-icons/ri';
import FloatingBtn from './layouts/FloatingBtn';
import {Link} from 'react-router-dom';

const AdminDashboard = () => {
  const [users, setUsers] = useState ([]);
  // eslint-disable-next-line
  const [isAuthenticated, setIsAuthenticated] = useContext (AppContext);

  // ComponentDidMount
  useEffect (() => {
    async function getUsers () {
      await axios
        .get ('/api/users/')
        .then (result => setUsers (result.data))
        .catch (err => console.log (err));
    }
    getUsers ();
  });

  // Event handler
  const handleDeleteUser = id => {
    axios
      .delete ('/api/users/delete/' + id)
      .then (setUsers (users.filter (user => user.id !== id)))
      .catch (err => console.log (err));
  };

  // Event handler
  const handleLogout = () => {
    setIsAuthenticated (false);
  };

  return (
    <div>
      <div className="">
        <AdminNavbar />
        <FloatingBtn />

        <div className="container mb-3">
          <Link to="/admin/user/add" className="btn btn-red text-white mb-3">
            <small><RiAddLine /> Create user</small>
          </Link>
        </div><hr />

        <div className="container">
          <div>
            <h5> <RiUserSearchLine size="30" /> User Database</h5>
            <table className="table table-hover table-sm">
              <thead>
                <tr className="">
                  <th scope="col">First</th>
                  <th scope="col">Last</th>
                  <th scope="col">Status</th>
                </tr>
              </thead>
              <tbody>
                {users.length === 0
                  ? 'loading'
                  : users.map (user => {
                      return (
                        <UserList
                          id={user._id}
                          key={user._id}
                          firstname={user.firstname}
                          lastname={user.lastname}
                          deleteUser={handleDeleteUser}
                        />
                      );
                    })}
              </tbody>
            </table>
            <hr />
            <div className="mt-2">
              <button
                className="btn btn-red text-white mb-3"
                onClick={handleLogout}
              >
                <small>Logout</small>
              </button>
            </div>
          </div>

        </div>

      </div>
    </div>
  );
};

export default AdminDashboard;

James Erringham-Bruce that's the code for my adminDashboard. Again, there's no t.map. I really appreciate your help man

Harcourt Hamsa

Try losing the "{ return( ); }" function at line 65, leave just the <UserList /> with it's contents. Try this:

{users.length === 0
                  ? 'loading'
                  : users.map (user =>
                        <UserList
                          id={user._id}
                          key={user._id}
                          firstname={user.firstname}
                          lastname={user.lastname}
                          deleteUser={handleDeleteUser}
                        />
)}

Extracting the users.map() function to a variable might help debugging.

See samples here:

reactjs.org/docs/lists-and-keys.html

Thais Ramalho THANK YOU🔥🔥🔥🔥🔥. I really appreciate🤞. I'll try it and give you a feedback

Hello Thais Ramalho , I tried that but it didn't work. PS: It works in my local machine . Thanks

Harcourt Hamsa Maybe something not correctly configured on the server? Or some error when building/deploying the code.