在组件 prop 属性中使用 .map() 做出反应

Question

I'm trying to conditionally render a component based on if that user is online. The problem im experiencing is with the status prop on my MessengerFriend component. In my conditional statement it is returning both 'online' and 'offline' , but when I only use the equivalent if It returns the online status correctly. My initial thought was that using onlineFriends.map() is returning both statuses because there are in fact users both online and offline.

const [friendsList, setFriendsList] = useState([])
const [onlineFriends, setOnlineFriends] = useState([])


let mappedFriendChatList = friendsList.map(friend => {
    return(
      <MessengerFriend 
        key={friend.friend_id}
        value={friend}
        status={onlineFriends.map(onlineFriend => onlineFriend.userId == friend.user_id ? 'online' : 'offline')}
      />
    )
  })

I'm expecting to have a list of all my friends and there status 'online' and 'offline' to display correctly

Answer 1

Map is the wrong method for this use-case; some is what you need.

{onlineFriends.some(onlineFriend => onlineFriend.userId === friend.user_id) ? 'online' : 'offline'}

You could also use filter with a length check on the result array, or find (which would work identically to some in this case).