title: How to pass an object as props in a map function in react
body: <p>I'm trying to pass props to a child component. The problem I am getting is that one of the properties i'm to pass is an array. The registrants array looks like this:</p>
  
  <pre class="lang-json prettyprint-override"><code>{
    name: "Rowan Powell",
    _id: "58658484d139c337601cfb6d",
    updatedOn: "2016-12-29T21:47:48.185Z",
    createdOn: "2016-12-29T21:47:48.185Z"
  },
  {
    name: "Savannah Powell",
    _id: "58658488d139c337601cfb6e",
    updatedOn: "2016-12-29T21:47:52.145Z",
    createdOn: "2016-12-29T21:47:52.145Z"
  }
  </code></pre>
  
  <p>If I try to pass the registered prop like below I get the following error:</p>
  
  <blockquote>
    <p>Uncaught (in promise) Error: Objects are not valid as a React child
    (found: object with keys {name, _id, updatedOn, createdOn}). 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.</p>
  </blockquote>
  
  <pre class="lang-js prettyprint-override"><code> return (
          &lt;div&gt;
              {this.state.events.map((event, key) =&gt; {
               return (
                      &lt;div key={key}&gt;
                          &lt;Event 
                              title={event.title}
                              date={event.date}
                              time={event.time}
                              description={event.description}
                              presentor={event.presentor}
                              location={event.location}
                              registered={event.registrants}
                              max_reg={event.max_reg}
                              id={event._id} /&gt;
                      &lt;/div&gt;
                  )
              })}
          &lt;/div&gt;
      )
  </code></pre>