0

I created such a code (and it works locally in Google Chrome but doesn't work on AWS) :

    parameters: {
      'forces': 100,
      'hit': 5,
      'defense': 5
    }
<Parameters params={this.props.parameters}/>
   //In render method:
   //console.log(this.props.params); "produces: Object{forces:100, hit:5, defence:5}"
const bars = Object.entries(this.props.params).map(([key,value]) => {
  return (
    <ProgressBar 
      key={key}
      property={key} 
      value={Number(value)} />  
  )
}); 
return (
  <div className="Parameters">
    {bars}
  </div>
);

Based on this information: How do I loop through or enumerate a JavaScript object how to create the equal code using old-fashion code:

const bars = [];
const obj = this.props.params;
for (const key of Object.keys(obj)) {
//console.log(key, obj[key]);
bars.push()

}

The "bars" array should have 3 Progress Bar Components... I created this project just for my own educational purposes and would like to learn different approaches.

Link to this app: Alex Pilugin: React-Game (it works in Chrome, not in Safari)

enter image description here

Community
  • 1
  • 1
Alex Pilugin
  • 683
  • 2
  • 10
  • 38

2 Answers2

1

replace it with Object.keys, since Object.entries is not supported yet in Safari.

const bars = [];
Object.keys(this.props.params).forEach(key => {
  const value = this.props.params[key];
  bars.push(
   <ProgressBar 
     key={key}
     property={key} 
     value={Number(value)} />  
   );
 });
hawk
  • 5,409
  • 2
  • 23
  • 29
0

Object.entries is an ES2017 Draft proposal. (Full Doc)

You'll need a polyfill for cross-browser support.

Dave Newton
  • 158,873
  • 26
  • 254
  • 302
  • Thank you. You are right. I understand it but I don't know how to add polyfill in my project or how to right code on ES2015... – Alex Pilugin Jan 04 '17 at 17:04