Get users except logged user - reactjs

Question

I don't know how to form my question, but I'll try explain my problem. So I'm creating local meet app similar as (tinder). But I spent about 2 hours and can't figure out how to create a logic, that when I get all users from database I display all users at main page, but there is a problem, it also display the user which is already logged in and he can see himself at main page. Is there any solution to display all users except that user which is logged in? I was trying to use filter method, but can't figure it out how to create correct logic or maybe there's a simple method how to do it?
There I'm getting all users and display them:
export default function HomePage() {
const [allUsers, getAllUsers] = useState([])
useEffect(() => {
async function fetchUsers() {
const resp = await get('api')
getAllUsers(resp)
console.log(resp)
}
fetchUsers()
}, [])
return (
<div className='home__page'>
<Toolbar />
<div className="home__users">
{allUsers && allUsers.map((users, i) => <SingleUser users={users} key={i} />)}
</div>
<footer className='footer'>
<p>All rights reserved by Cartoon Match organization. To read more about our policy <Link to='/policy'>click here</Link>. </p>
</footer>
</div>
)
}
There's SingleUser component:
import React from "react";
export default function SingleUser({ users }) {
return (
<div className='single__user'>
<img src={users.image[0]} alt="" />
<h3>{users.firstName} {users.lastName}</h3>
<h4>{users.gender}</h4>
</div>
);
}
I'm also have a users secret saved in localstorage, maybe it could be easier to think simple solution

Answer 1

Normally you'll have access to the current loged in user stored in a global context, after user login. And there're two ways to filter the item you don't want to render in a list:
1. Conditional rendering (using && the Logical AND operator) inside the map() method:
export default function HomePage() {
const [currentUser, setCurrentUser] == useState(); // <- stores current loged in user
const [allUsers, getAllUsers] = useState([])
return (
<div className="home__users">
{allUsers && allUsers.map((user, i) => user.id !== currentUser.id && (<SingleUser users={user} key={user.id} />))}
</div>
)
}
2. Filter the list first and then render it, by chainning array method list.filter().map():
export default function HomePage() {
const [currentUser, setCurrentUser] == useState(); // <- stores current loged in user
const [allUsers, getAllUsers] = useState([])
return (
<div className="home__users">
{allUsers && allUsers.filter(user => user.id !== currentUser.id).map((user, i) => <SingleUser users={user} key={user.id} />)}
</div>
)
}
Array method accept an callback function, that we can spcify some condition, and check if every iteration of the item in the array meet such condition, if it meets the condition, then return the item, and filter() as a whole returns a shallow copy of the array itself, so we can continue to chain the method with map():
allUsers.filter(user => user.id !== currentUser.id).map(user => {...})
This means, if the user with id not equal to the loged in user, then return the user item.
See more at MDN docs: Logical AND (&&), filter method