Ionic React Conditionals

{
  isTrue && <IonItem>Content</IonItem>;
}

{
  isTrue ? <IonItem>Content</IonItem> : <IonItem>Other Content</IonItem>;
}

{
  appPages.map((appPage, index) => {
    return (
      <IonMenuToggle key={index} autoHide={false}>
        <IonItem
          className={location.pathname === appPage.url ? "selected" : ""}
          routerLink={appPage.url}
          routerDirection="none"
          href={appPage.href}
          target="_blank"
          lines="none"
          detail={false}
        >
          <IonIcon slot="start" ios={appPage.iosIcon} md={appPage.mdIcon} />
          <IonLabel>{appPage.title}</IonLabel>
        </IonItem>
      </IonMenuToggle>
    );
  });
}

export interface Message {
  fromName: string;
  subject: string;
  date: string;
  id: number;
}
const messages: Message[] = [
  {
    fromName: 'Matt Chorsey',
    subject: 'New event: Trip to Vegas',
    date: '9:32 AM',
    id: 0
  }
];
const [messages, setMessages] = useState<Message[]>([]);
return (
  <IonList>
    {messages.map(m => <MessageListItem key={m.id} message={m} />)}
  </IonList>
);