title: convert json to array/map
body: <p>My rest API returns with the following json content:</p>
  
  <pre><code>[{
      "key": "apple",
      "value": "green"
  },
  {
      "key": "banana",
      "value": "yellow"
  }]
  </code></pre>
  
  <p>I am iterating through the list with this code:</p>
  
  <pre><code>this.props.json.map(row =&gt; {
      return &lt;RowRender key={id.row} row={row} /&gt;
  }
  </code></pre>
  
  <p>It works because the content is displayed but on the web browser's console I can see an error: </p>
  
  <blockquote>
    <p>map is not a function</p>
  </blockquote>
  
  <p>I googled for it and I changed my code to this:</p>
  
  <pre><code>Array.prototype.slice.call(this.props.json).map(row =&gt; {
      return &lt;RowRender key={id.row} row={row} /&gt;
  }
  </code></pre>
  
  <p>It works without any error but seems so complicated. Is that the correct way to do this job?</p>
  
  <hr>
  
  <p><strong>UPDATE</strong></p>
  
  <p>What I tried:</p>
  
  <ul>
  <li>JSON.parse(...).map:  Unexpected end of JSON input</li>
  <li>JSON.parse(JSON.stringify(...)).map(...): data is displayed but I get an error: JSON.parse(...).map is not a function</li>
  <li>Array(...).map: Each child in array or iterator should have a unique key.</li>
  </ul>