Me gustaría saber como mapear un array, donde el primer resultado del array tiene que ser el que cumpla la condición, pero se siga mapendo el resto. Por ejemplo, que el primer resultado del array sea el Organizador y el resto sean los Participantes. La condición por la que filtrar:
{assistant.id === ownerId ? "Organizador" : "Participante"}
Este es mi componente de react.
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>
);
};
Cualquier orientación o ayuda sería genial. Muchas gracias!