类型错误：this.state.rates.map 不是函数 - Reactjs

Question

I am getting this error after trying to map over API response. Appreciate your help. I am able to see response in console but

is not rendering. I have managed to resolve typerror thanks to this: ReactJs - TypeError: Cannot read property 'map' of undefined but struggling to move forward.

Thank you.

Code below:

 import React from 'react'; import './App.css'; import prettyFormat from 'pretty-format'; import axios from 'axios'; class App extends React.Component { state = { rates: [] } onSubmitExchange = this.onSubmitExchange.bind(this); onSubmitExchange() { axios({ "method":"GET", "url":"https://coingecko.p.rapidapi.com/exchange_rates", "headers":{ "content-type":"application/octet-stream", "x-rapidapi-host":"coingecko.p.rapidapi.com", "x-rapidapi-key":"f4756b8409msh762478a357cd070p10685fjsnce9080fa5478" } }) .then((response)=>{ //console.log(response) //response is an object with a data property that contains the rates const { rates } = response.data; this.setState({ rates }) }) } render() { let xrpName = (this.state.rates.xrp && this.state.rates.xrp) ? this.state.rates.xrp.name : undefined console.log(xrpName) console.log(this.state.rates) const items = this.state.rates.map((item) => {return <li>{ item.name }</li> }); return ( <div> <ul> { items } </ul> <button onClick={this.onSubmitExchange}>FIRE</button> </div> ) } } export default App;

Answer 1

The API returns an object. You can't map over it like an array. First change

state = {
   rates: []
}

to

state = {
   rates: {}
}

Then use Object.keys(rates) to map over it.

Answer 2

Sorted with this. Needed to use Object.keys() and then map over it as Ola mentioned.

      const cryptoTable = Object.entries(cryptos).map((crypto, index) => {
        return (<tr>
                  <td key={index}>{crypto[1].name}</td>
                  <td>{crypto[1].unit}</td>
                  <td>{crypto[1].value}</td>
                  <td className="tag">{crypto[1].type}</td>
               </tr>)
    })


      return (
        <div>
          <div>
              { cryptoTable }
          </div>
          <button onClick={this.onSubmitExchange}>FIRE</button>
          <button onClick={this.onFilterHandler}>Filter</button>
        </div>
      )

    }
}

export default App;