How to use map function to display json having spaces on key to component on React.js

Question

I'm Trying to consume an API of stock market, So I make an API call when the form is submit and received this JSON Bellow and store his value on Hook.

    "Meta Data": {
        "1. Information": "Daily Prices (open, high, low, close) and Volumes",
        "2. Symbol": "IBM",
        "3. Last Refreshed": "2020-12-04",
        "4. Output Size": "Compact",
        "5. Time Zone": "US/Eastern"
    },
    "Time Series (Daily)": {
        "2020-12-04": {
            "1. open": "123.9700",
            "2. high": "127.3800",
            "3. low": "123.6400",
            "4. close": "127.2000",
            "5. volume": "5522760"
        },
        "2020-12-03": {
            "1. open": "124.1600",
            "2. high": "124.8600",
            "3. low": "123.2900",
            "4. close": "123.6100",
            "5. volume": "4548161"
        }
}

So I create two simple components: StockList and StockItem, StockList is used to render all StockItem, I can't access the value of JSON in StockItem because I dont know how to display this data having spaces on keys. Usually the jsons is like this:

  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    }

It's easy to display using map like this:

users.map((user) => {
   return(
     <p>{user.name}</p>
     <p>{user.username}</p>
   )
});

When I tried to use map to resolve this question I got undefined propertie.

Answer 1

To access the data which having spaces on keys.

user['key'] => 

example : user['first name']

 let a = {"first name": 'dileep'}; console.log(a['first name'])