Map through object React

Question

I am receiving data from an external api in React

I have an object

lend_rates = {
bitfinex : 1.2,
blockfi : 2.3,
celsius : 3,
coinlist : 1.5
}

I am trying to map through it so i can render the data i.e it shows on the screen "bitfinex : 1.2, blockfi : 2.3, etc"

  metrics.lend_rates.map((rate, i)=>{
        return(
          <div key={i}>
            {rate.key} : {rate.value}
          </div>
        )
      })

but im gettin an error saying its not a function.

What am i doing wrong?

Make the object an array to render – Vince Feb 16 '21 at 19:34 — Vince, Feb 16 '21 at 19:34
metrics is an object that lend_rates a part of – Joe Cillo Feb 16 '21 at 19:35 — Joe Cillo, Feb 16 '21 at 19:35

score 4 · Answer 1 · answered Feb 16 '21 at 19:36

4

I guess there's no .map function on Objects.

Try with Object.entries, which returns a mappable array, instead:

Object.entries(lend_rates).map(([ key, value ], i) => 
  <div key={i}>
    {key} : {value}
  </div>
)

answered Feb 16 '21 at 19:36

ΔO 'delta zero'

3,506
1
19
31

score 1 · Answer 2 · answered Feb 16 '21 at 19:39

const lend_rates = {
bitfinex : 1.2,
blockfi : 2.3,
celsius : 3,
coinlist : 1.5
}

const lend_rates_arr = Object.keys(lend_rates);


const newArr = lend_rates_arr.map((rate, idx) => { 
  return { label: [rate], value: Object.values(lend_rates)[idx] }
})

console.log(newArr);

newArr.map(item => console.log(item.label))

Map through object React

2 Answers2