title: How can I render nested JSON in react.js?
body: <p>My data looks like this:</p>
  <pre><code>  &quot;stats&quot;: {
      &quot;offset&quot;: 0,
      &quot;count&quot;: 1
    },
    &quot;entries&quot;: [{
      &quot;context&quot;: &quot;time_latitude_longitude&quot;,
      &quot;classifiers&quot;: {
        &quot;station&quot;: &quot;keca2&quot;
      },
      &quot;axes&quot;: {
        &quot;time&quot;: &quot;2014-01-01T00:00:00&quot;,
        &quot;longitude&quot;: -131.625,
        &quot;latitude&quot;: 55.33100128173828
      },
      &quot;data&quot;: {
        &quot;wave_height&quot;: null,
        &quot;sea_surface_temperature&quot;: 6.599999904632568,
      }
    }]
  }
  </code></pre>
  <p>And here is my code :</p>
  <pre><code>          &lt;h1&gt;Buoy Detail Page&lt;/h1&gt;
              {buoy.entries.map((entry, i) =&gt; {
                  return (
                      &lt;&gt;
                          &lt;div key={i}&gt;Station ID: {entry.classifiers.station}&lt;/div&gt;
                          
                          &lt;div key={i}&gt;Sea Surface Temperature: {Math.floor(entry.data.sea_surface_temperature)} degrees C&lt;/div&gt;
                          &lt;div key={i}&gt;Wave Height: {entry.data.wave_height} meters&lt;/div&gt;
  </code></pre>
  <p>How can I rewrite that first div to get the value of 'keca2' to render on my page? I figured I just have to use another array iterator, but it seems like a waste. Is there a dryer way to do this?</p>