title: Render an array of JSON Objects returned from API
body: <p>I query an API which returns an array of items, with each item having multiple things within (id, date, time, description, etc) <a href="https://i.stack.imgur.com/poHi0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/poHi0.png" alt="enter image description here" /></a></p>
  <p>How can I render this information similar to this:</p>
  <p><a href="https://i.stack.imgur.com/nH7aR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nH7aR.png" alt="enter image description here" /></a></p>
  <p>What I have tried:</p>
  <pre><code>render() {
      return (
          &lt;div className = &quot;OneStock&quot;&gt;
          &lt;Container fluid&gt;
              
              {this.props.value.map(item =&gt;(&lt;Row&gt;&lt;span&gt;{item.description}&lt;/span&gt;&lt;Badge&gt;{item.option_symbol}&lt;/Badge&gt;&lt;span&gt;{item.strike_price}&lt;/span&gt;&lt;/Row&gt;))}
          
          &lt;/Container&gt;
      &lt;/div&gt;
  
      )
  }
  </code></pre>
  <p>This doesn't render anything, but I want to parse &amp; map ALL the info before rendering it. So, each item on a separate row, with the information within item displayed in columns like the image above</p>
  <p>How can I accomplish this?</p>