How can I write if statement inside a map in react? - reactjs

Question

I am trying to write an if statement if invited is not undefined.
Here is my following code base:
{tabs[activeTab] === "Pending" &&
userInvitedList.map((user, index) => (
{user.invited.pending && ()}
<InviteSentList
user={user}
index={index}
selected={selected}
handleSelect={handleSelect}
/>
))}
How can I check user.invited.pending in this case?

Answer 1

You can do this.
{tabs[activeTab] === "Pending" &&
userInvitedList.map((user, index) => (
{user.invited.pending &&
<InviteSentList
key={index}
user={user}
index={index}
selected={selected}
handleSelect={handleSelect}
/>
}
))}
You can refer more in details here [if condition inside map][1]
[1]: https://stackoverflow.com/questions/44969877/if-condition-inside-of-map-react#:~:text=I%20have%20a%20map(),)%20%3A%20(%20%2F%2F%20ByeBye!%20)%7D

Answer 2

If you want show InviteSentList when user.invited.pending is not undefined, you just update like this:
{user.invited.pending && (
<InviteSentList
user={user}
index={index}
selected={selected}
handleSelect={handleSelect}
key={user.id} // unique
/>
)}
Note: You need to add key props

Answer 3

if you put if statement or something like this in map, you can remove () after arrow function and change with curly brackets {}. You can do this:
{tabs[activeTab] === "Pending" &&
userInvitedList.map((user, index) => {
user.invited.pending && (
<InviteSentList
key={index}
user={user}
index={index}
selected={selected}
handleSelect={handleSelect}
/>
)}
)}

Answer 4

You can do it like this.
{tabs[activeTab] === "Pending" &&
userInvitedList.map((user, index) => {
return user.invited.pending ? (
<InviteSentList
user={user}
index={index}
selected={selected}
handleSelect={handleSelect}
/>
) : null;
})}