React.js Object.entriesではなくオブジェクトを反復処理する正しい方法

Question

Object.entries(object).map((key, i)はECMAScript 7の実験的技術であることがわかりましたので、何かが間違っていると感じました。任意のネイティブのjavascriptの代替ですか？

名前、価格、説明の値に問題はありません。どこでレンダリングすべきか分かり、Populate.keyでアクセスできますが、その特性については、オブジェクトを読み書きし、両方のキーをレンダリングする必要があります。と値。

私はObject.keys(priceChars).map(function(key, i)を使用しようとしましたが、キーと値を区別する方法を理解していませんでした。同様に、それは "パフォーマンス500"をレンダリングしていましたが、アイコンクラスにはパフォーマンスワードが必要で、500は表示される実際の値です。

私のJSON構造

const Populate = { 
    'name': "Product", 
    'price': "1000", 
    'description': "Product description", 
    'characteristics': { 
    'performance': '500', 
    'pressure': '180', 
    'engine': '4', 
    'size': '860*730*1300', 
    'weight': '420' 
    } 
} 

とコンポーネント

class PriceBlock extends Component { 
    render() { 
    const {priceName, priceDesc, priceVal, priceChars} = this.props; 
    const characteristics = Object.entries(priceChars).map((key, i) => { 
     return (
     <div className="price__icon-row" key={i}> 
      <i className={'ico ico-' + key[0]}></i> <span>{key[1]}</span> 
     </div> 
    ); 
    }); 
    return (
     <div className="col-5 price__block"> 
     <div className="price__name">{priceName}</div> 
     <div className="price__description">{priceDesc}</div> 
     <div className="price__icons"> 
      {characteristics} 
     </div> 
     <div className={ managePriceClass(priceVal) }>{priceVal}</div> 
     </div> 
    ); 
    } 
} 

Answer 1

a = { 
    a: 1, 
    b: 2, 
    c: 3 
} 

Object.keys(a).map(function(keyName, keyIndex) { 
    // use keyName to get current key's name 
    // and a[keyName] to get its value 
})