Мне не нравится использовать Object.entries(object).map((key, i)
, потому что я узнал, что это экспериментальная технология ECMAScript 7, и я чувствую, что что-то может пойти не так на производстве. Есть ли альтернатива для обычного JavaScript?
У меня нет проблем со значениями имени, цены, описания, потому что я точно знаю, где они должны быть визуализированы, и я могу получить к ним доступ с помощью Population.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>
);
}
}