I am new to react and have written a functional component to call an API that stores data as an array that I defined called Measurments .

My problem is that I have not been able to display the Array data on my front end.

Can anyone provide any guidance on how to be able to display this on my web page?

I attempted to use the notation:

{ measurement[0].name }

in the return statement but it does not return anything.

I've also tried to assign them to the prop values (parameter, unit, lastUpdated) at the time the API is handling the data and that also didn't work.

    parameter = result[i].measurements[0].parameter;
    unit = result[i].measurements[0].unit;
    lastUpdated = result[i].measurements[0].lastUpdated;

I have attached the full contents of the file so you can see my logic. This file is called CitySelection.js

import axios from 'axios';
import React from 'react';
const measurements = [];
const CitySelection = (props) => {
    var city = props.city;
    var cityTwo = props.cityTwo;
    var parameter = props.parameter;
    var unit = props.unit;
    var lastUpdated = props.lastUpdated;

const Api_call = (city, cityTwo) => {
    let api = "https://u50g7n0cbj.execute-api.us-east-1.amazonaws.com/v2/latest?limit=100&page=1&offset=0&sort=asc&radius=1000&country_id=US&country=US&city="+city.city+"&city="+cityTwo.cityTwo
    axios.get(api, { crossdomain: true })     
    .then(response => {    
    var result = response.data.results
    
    // This is where measurments *Array* gets populated
    if (result != null){    
        for(let i = 0; i < result.length; i++){     
            parameter = result[i].measurements[0].parameter;
            lastUpdated = result[i].measurements[0].lastUpdated;
            unit = result[i].measurements[0].unit;
            console.log(unit, parameter, lastUpdated);
            measurements.push({
            "name":result[i].city, 
            "value":result[i].measurements[0].value,
            "unit":result[i].measurements[0].unit, 
            "parameter":result[i].measurements[0].parameter,
            "lastUpdated":result[i].measurements[0].lastUpdated
        })   
      }
    
    }

})
} 
    return (
            <div>
                <button onClick={() => Api_call({city},{cityTwo})} >Compare Air Quality </button>
                     <p>{ measurements[0].name }</p>

                <span>{unit} {parameter} {lastUpdated}</span>
                <a>{city} has metrics for {parameter}{unit} and this dated was collected: {lastUpdated}</a>
           
        </div>
    )
}

export default CitySelection;