Search code examples
reactjsionic-react

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


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>

Solution

  • 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>