What is the replacement for *ngFor = "let row of data;" in Ionic React

Question

I am fetching an array of values from a API call and I am saving it an array. Now I am creating a data table using Ionic React Grid like below and I want to pass the array values into the columns I know in Angular it is possible to achieve it using *ngFor = "let row of data;" in IonRow but not exactly sure what we should use in React.

<div className="header-row">
          <IonRow>
            <IonCol>
              PoiName
              </IonCol>
              <IonCol>
              Total Assets
              </IonCol>
              <IonCol>
              Static Assests
              </IonCol>
              <IonCol>
              Fluid Assests
              </IonCol>
            </IonRow>
            </div>

score 0 · Accepted Answer · answered Sep 23 '21 at 15:44

To do it a loop in react is different than Angular, in this case you need to use map in your array, for example:

<div className="header-row">
    <IonRow>
        {data.map((column, index) => (
          <IonCol key={index}>{column}</IonCol>
        ))}
    </IonRow>
</div>

What is the replacement for *ngFor = "let row of data;" in Ionic React

1 Answers1