0

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":"$",
         "rate":"29,941.3155",
         "description":"United States Dollar",
         "rate_float":29941.3155
      },
      "GBP":{
         "code":"GBP",
         "symbol":"£",
         "rate":"23,980.6882",
         "description":"British Pound Sterling",
         "rate_float":23980.6882
      },
      "EUR":{
         "code":"EUR",
         "symbol":"€",
         "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 class="card">
                    <div class="card-body">
                        <h5 class="card-title">{list.time}</h5>
                        <h5 class="card-title">{list.bpi}</h5>
                    </div>
                </div>
            ))}
        </div>
    )
};

export default Lists
hammer89
  • 343
  • 1
  • 5
  • 13

2 Answers2

0

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 class="card">
                  <div class="card-body">
                      <h5 class="card-title">{lists.time}</h5>
                      <h5 class="card-title">{lists.bpi}</h5>
                  </div>
               </div>
        
        </div>
    )
};

export default Lists
Dan James
  • 546
  • 4
  • 9
  • `./src/components/list.js Line 9: 'list' is not defined no-undef Search for the keywords to learn more about each error.` When I delete the map. I'm getting this error. – hammer89 Jun 02 '22 at 10:23
  • thats because the name of the variable has changed to "lists" not "list" as it now references the prop. – Dan James Jun 02 '22 at 11:07
0

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

Alazar-dev
  • 94
  • 2
  • 5
  • When I remove the map part Im getting this error: ` ./src/components/list.js Line 9: 'list' is not defined no-undef Search for the keywords to learn more about each error.` – hammer89 Jun 02 '22 at 10:33
  • Yeah you can't use map for an object. so in your case. you just display each object value directly to your jsx. – Alazar-dev Jun 02 '22 at 11:44