RenacerSocial/src/components/ListComponent.tsx

import {
  IonContent,
  IonItem,
  IonLabel,
  IonList,
  IonListHeader,
} from "@ionic/react";
import "../components/ListComponent.css";

const ListComponent: React.FC<{ title?: string; laws: string[] }> = (props) => {
  const title = props.title;
  const laws = props.laws;
  return (
    <IonContent>
      {title ? (
        <IonListHeader>
          <IonLabel>{title}</IonLabel>
        </IonListHeader>
      ) : null}

      {laws.map((LawName: string) => {
        return (
          <IonItem href="#">
            <p className="ListItemText">{LawName}</p>
          </IonItem>
        );
      })}

      {/*
      <IonList className="list" lines="full">
        <IonItem href="#">
          <p className="ListItemText">Ley #1</p>
        </IonItem>
        <IonItem href="#">
          <p className="ListItemText">Ley #1</p>
        </IonItem>
        <IonItem href="#">
          <p className="ListItemText">Ley #1</p>
        </IonItem>
        <IonItem href="#">
          <p className="ListItemText">Ley #1</p>
        </IonItem>
      </IonList>
      */}
    </IonContent>
  );
};
export default ListComponent;