Loop and render an object in React.js
<p>I'm trying to render an object inside an element (Panel element in <code>react-bootstrap</code>).</p>

<pre><code>import React, { PropTypes } from 'react';
import { Panel } from 'react-bootstrap';

const NetworkDetail = React.createClass({
  render () {
    return (
      &lt;Panel header="Network Details" bsStyle="info"&gt;
        {this.props.dataDetail &amp;&amp; Object.keys(this.props.dataDetail).map(function(detail, id) {
            return &lt;span key={id}&gt;{this.props.dataDetail[detail]}&lt;/span&gt;;
        }.bind(this))}
      &lt;/Panel&gt;
    )
  }
})

export default NetworkDetail
</code></pre>

<p>But that doesn't work. The error thrown is </p>

<blockquote>
  <p><strong>Uncaught Invariant Violation:</strong> Objects are not valid as a React child
  (found: object with keys {self}). If you meant to render a collection
  of children, use an array instead or wrap the object using
  createFragment(object) from the React add-ons. Check the render method
  of 'NetworkDetail'.</p>
</blockquote>

<p>What I don't understand is that if I use</p>

<p><code>return &lt;span key={id}&gt;{this.props.dataDetail.myProperty}&lt;/span&gt;;</code></p>

<p>it works.</p>

<p>How can I render all the properties and values of my object ?</p>