Js loop through array of objects

Question

I have an array which looks like this : let x = [{ pulse: 140 }, { oxygenSaturation: 89 }, { respiratoryRate: 35 }, { systolic: 80 }, { temperature: 40 }];

My code :

const Vitals: React.FC<VitalsComponentProps> = ({ vitals, patientUuid }) => {
  const { t } = useTranslation();

  let x = [{ pulse: 140 }, { oxygenSaturation: 89 }, { respiratoryRate: 35 }, { systolic: 80 }, { temperature: 40 }];
  console.log('vitals', x);

  return (
    <div>
      {x.length ? (
        x.map((vital: PatientVitals, ind) => (
          <div>
            <Grid className={styles.grid}>
              <Row>
                <Tile light>
                  <p>Temp</p>
                  <div className={styles.vitalValues}>
                    <p>
                      {vital.temperature} : {ind}
                    </p>
                    <p className={styles.unit}>°C</p>
                  </div>
                </Tile>
                <Tile light>
                  <p>Bp</p>
                  <div className={styles.vitalValues}>
                    <p>{vital.diastolic}</p>
                    <p className={styles.unit}> mmHg</p>
                  </div>
                </Tile>
                <Tile light>
                  <p>Heart rate</p>
                  <div className={styles.vitalValues}>
                    <p>{vital.pulse}</p>
                    <p className={styles.unit}>bpm</p>
                  </div>
                </Tile>
              </Row>

              <Row>
                <Tile light>
                  <p>Sp02</p>
                  <p>{vital.oxygenSaturation}</p>
                  <p className={styles.unit}>%</p>
                </Tile>
                <Tile light>
                  <p>R. Rate</p>
                  <p>{vital.respiratoryRate}</p>
                  <p className={styles.unit}>/ min</p>
                </Tile>
              </Row>

              <Row>
                <Tile light>
                  <p>Height</p>
                  <p>{vital.height}</p>
                  <p>cm</p>
                </Tile>
                <Tile light>
                  <p>Bmi</p>
                  <p>{vital.bmi}</p>
                  <p className={styles.unit}>kg / m²</p>
                </Tile>
                <Tile light>
                  <p>Weight</p>
                  <p>{vital.weight} </p>
                  <p className={styles.unit}>kg</p>
                </Tile>
              </Row>
            </Grid>
            <p className={styles.unit}>Sally Garnatt · 14:21</p>
          </div>
        ))
      ) : (
        <div>
          <p className={styles.emptyText}>Vitals has not been recorded for this patient for this visit</p>
          <Button
            size="small"
            kind="ghost"
            renderIcon={ArrowRight16}
            onClick={() => navigate({ to: `\${openmrsSpaBase}/patient/${patientUuid}/chart` })}
            iconDescription={t('vitalsForm', 'Vitals form')}>
            {t('vitalsForm', 'Vitals form')}
          </Button>
        </div>
      )}
    </div>
  );
};

I am trying to obtain the values in the objects and display them in different tiles, but my table is drawn seven times despite the fact that i am looping through my array. What im i doing wrong. Any advice/recommendations will be appreciated.

Answer 1

your array should look like

[{
pulse:140,
oxygenSaturation:89,
systolic:80
}]