I would like to know how to map an array, where the first result of the array has to be the one that meets the condition, but the rest continue to be mapped. For example, let the first result of the array be the Organizer and the rest be the Participants . The condition to filter by:
{assistant.id === ownerId ? "Organizador" : "Participante"}
This is my react component.
interface Props {
assistants: Assistant[];
ownerId: Id;
}
export const EventAssistants = ({ assistants, ownerId }: Props) => {
return (
<section>
<StyledSectionTitle>Asistentes ({assistants.length})</StyledSectionTitle>
<StyledAssitantsList>
{assistants.map((assistant) => (
<li key={assistant.id}>
<StyledAssistant>
<StyledFlex
flexDirection="column"
justifyContent="center"
alignItems="center"
>
<StyledUserImage background={assistant.avatar} size="70px" />
<p className="fullname">
{assistant.name} {`${assistant.lastName.substring(0, 1)}.`}
</p>
<p className="usertype">
{assistant.id === ownerId ? "Organizador" : "Participante"}
</p>
</StyledFlex>
</StyledAssistant>
</li>
))}
</StyledAssitantsList>
</section>
);
};
Any guidance or help would be great. Thank you very much!