How to pass an object as props in a map function in react

Question

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:

{
  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"
}

If I try to pass the registered prop like below I get the following error:

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.

 return (
        <div>
            {this.state.events.map((event, key) => {
             return (
                    <div key={key}>
                        <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} />
                    </div>
                )
            })}
        </div>
    )

Answer 1

Try this

this.state= {events: [{
      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"
    }]};
    // change key to index
     return (
            <div>
                {this.state.events.map((event, index) => {
                 return (
                        <div key={index}>
                            <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} />
                        </div>
                    )
                })}
            </div>
        )

Answer 2

To be a little more organized your component should look something like the code below. In your parent component, you can run a function that returns an array of your Event child components. The map function in renderChildren will return an array. Therefore, you can just return the result of that function. Please let me know if you have any questions.

import React from 'react'

// This is your child component:
import Event from './Event'


export default class Parent extends React.Component {
  constructor() {
    super()

    this.state = {events: []}
  }
  renderChildren(events) {
    return events.maps((event, key) => {
      return (
        <div key={key}>
          <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}
          />
        </div>
      )
    })
  }
  render() {
    return (
      <div className='ParentComponent'>
        {this.renderChildren(this.state.events)}
      </div>
    )
  }
}