How to mapping restful api in react app via bootstrap-CodePudding

I want to consume restful api in react application via bootstrap. But I can't mapping correctly. I believe that the problem is brackets. But I couldn't figure out. (ignore my div part if I can mapping, I will update that part.)

My restful api: https://api.coindesk.com/v1/bpi/currentprice.json

Restful api Json formatted:

{
   "time":{
      "updated":"Jun 2, 2022 08:38:00 UTC",
      "updatedISO":"2022-06-02T08:38:00 00:00",
      "updateduk":"Jun 2, 2022 at 09:38 BST"
   },
   "disclaimer":"This data was produced from the CoinDesk Bitcoin Price Index (USD). Non-USD currency data converted using hourly conversion rate from openexchangerates.org",
   "chartName":"Bitcoin",
   "bpi":{
      "USD":{
         "code":"USD",
         "symbol":"&#36;",
         "rate":"29,941.3155",
         "description":"United States Dollar",
         "rate_float":29941.3155
      },
      "GBP":{
         "code":"GBP",
         "symbol":"&pound;",
         "rate":"23,980.6882",
         "description":"British Pound Sterling",
         "rate_float":23980.6882
      },
      "EUR":{
         "code":"EUR",
         "symbol":"&euro;",
         "rate":"28,094.2357",
         "description":"Euro",
         "rate_float":28094.2357
      }
   }
}

My App.js

import React, {Component} from 'react';
import Lists from './example/lists';

class App extends Component {
    render() {
        return (
            <Lists lists={this.state.lists} />
        )
    }

    state = {
        lists: {}
    };

    componentDidMount() {
        fetch('https://api.coindesk.com/v1/bpi/currentprice.json')
            .then(res => res.json())
            .then((data) => {
                this.setState({ lists: data })
            })
            .catch(console.log)
    }
}

export default App;

My list.js:

import React from 'react'

const Lists = ({lists}) => {
    return (
        <div>
            <center><h1>Exchange</h1></center>
            {lists.map((list) => (
                <div >
                    <div >
                        <h5 >{list.time}</h5>
                        <h5 >{list.bpi}</h5>
                    </div>
                </div>
            ))}
        </div>
    )
};

export default Lists

CodePudding user response：

The json is not an array therefore no you do not need to map through it. Remove the map from the List component.

import React from 'react'

const Lists = ({lists}) => {
    return (
        <div>
            <center><h1>Exchange</h1></center>
           
              <div >
                  <div >
                      <h5 >{lists.time}</h5>
                      <h5 >{lists.bpi}</h5>
                  </div>
               </div>
        
        </div>
    )
};

export default Lists

CodePudding user response：

I am not sure your json is complete but, since your json is returning an object, you cannot use map or any loop. You just need to display the data without looping