Как можно перебрать объект в jsx?

Question

[Михаил Ярема]

Добрый день! Подскажите пожалуйста.
У меня есть к примеру вот такой объект.
{spb: "Санкт-Петербург", madrid: "Мадрид", berlin: "Берлин", tokyo: "Токио", oslo: "Осло"}

Во всех примерах используется перебор массива при помощи map.
Я могу как нибудь так же вывести объект к примеру через for in?

{for(var key in cities){
return <div key={key} className="card-panel">{cities[key]}</div>
})}

Answer 1

[Mikhail Osher]

{Object.keys(cities).map(cityId => (
  <div key={cityId} className="card-panel">
    {cities[cityId]}
  </div>
))}

Answer 2

[Дмитрий]

Вот только что тоже голову ломал именно нужно было перебрать объект

var list = [];
for(var key in cities){
    list.push(
        <div key={key} className="card-panel">{cities[key]}</div> 
    )
}