How can I refractory mapping in react - reactjs

Question

I am trying to refractory my codes in react, I have to duplicate code to make it works.
Here is my following code:
<div className="team-invitees-tab-panes">
{!loading &&
currentInvitee.invited.accepted &&
tabs[activeTab] === "Pending" &&
invitees.map((user, index) => (
<div
role="button"
className={
selected === index
? "member-list-item-container selected"
: index === selected - 1
? "member-list-item-container border-none"
: "member-list-item-container"
}
tabIndex={index}
key={`member-${index}`}
onClick={() => handleSelect(index)}
onKeyPress={() => {
return;
}}
>
<div className="member-list-item">
<div
className="avatar"
style={{ backgroundImage: `url(${user.picture})` }}
/>
<div className="name">{user.fullname}</div>
<div className="status">
<svg
width="12"
height="16"
viewBox="0 0 12 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.1836 4.90431C11.338 4.79611 11.4632 4.65656 11.5496 4.49648C11.636 4.33641 11.6812 4.16012 11.6817 3.98132V1.40406C11.6813 1.09731"
fill="#102A42"
/>
</svg>
</div>
</div>
</div>
))}
{!loading &&
currentInvitee.invited.declined &&
tabs[activeTab] === "Declined" &&
invitees.map((user, index) => (
<div
role="button"
className={
selected === index
? "member-list-item-container selected"
: index === selected - 1
? "member-list-item-container border-none"
: "member-list-item-container"
}
tabIndex={index}
key={`member-${index}`}
onClick={() => handleSelect(index)}
onKeyPress={() => {
return;
}}
>
<div className="member-list-item">
<div
className="avatar"
style={{ backgroundImage: `url(${user.picture})` }}
/>
<div className="name">{user.fullname}</div>
<div className="status">
<svg
width="12"
height="16"
viewBox="0 0 12 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.1836 4.90431C11.338 4.79611 11.4632 4.65656 11.5496 4.49648C11.636 4.33641 11.6812 4.16012 11.6817 3.98132V1.40406C11.6813 1.09731"
fill="#102A42"
/>
</svg>
</div>
</div>
</div>
))}
</div>
Here is my photo of how my code looks like in web page
Is there anything that help me not to duplicate code for pending, accepted and declined?
Thank you so much for helping me, I really appreaciate it

Answer 1

I think you should make sepatare component Invitation which would render element of invites
const Invite = ({ user, selected, index, handleSelect }) => {
return (
<div
role="button"
className={
selected === index
? "member-list-item-container selected"
: index === selected - 1
? "member-list-item-container border-none"
: "member-list-item-container"
}
tabIndex={index}
key={`member-${index}`}
onClick={() => handleSelect(index)}
onKeyPress={() => {
return;
}}
>
<div className="member-list-item">
<div
className="avatar"
style={{ backgroundImage: `url(${user.picture})` }}
/>
<div className="name">{user.fullname}</div>
<div className="status">
<svg
width="12"
height="16"
viewBox="0 0 12 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.1836 4.90431C11.338 4.79611 11.4632 4.65656 11.5496 4.49648C11.636 4.33641 11.6812 4.16012 11.6817 3.98132V1.40406C11.6813 1.09731"
fill="#102A42"
/>
</svg>
</div>
</div>
</div>
)
}
and use it like
<div className="team-invitees-tab-panes">
{!loading &&
currentInvitee.invited.accepted &&
tabs[activeTab] === 'Pending' &&
invitees.map((user, index) => (
<Invite
index={index}
user={user}
handleSelect={handleSelect}
selected={selected}
/>
))}
{!loading &&
currentInvitee.invited.declined &&
tabs[activeTab] === 'Declined' &&
invitees.map((user, index) => (
<Invite
index={index}
user={user}
handleSelect={handleSelect}
selected={selected}
/>
))}
</div>
also it looks like you are using invitees array for each tab, is it going to change to seprate arrays in the future?