I'm trying to pass props to a child ponent. 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>
    )

I'm trying to pass props to a child ponent. 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>
    )

• javascript
• arrays
• json
• reactjs

Share Improve this question Follow edited Jan 3, 2017 at 16:03 Facundo La Rocca 3,88622 gold badges2828 silver badges5050 bronze badges asked Jan 3, 2017 at 15:42 jordanpowell88jordanpowell88 83733 gold badges1111 silver badges2525 bronze badges 3

• 3 Seems as if the error is thrown inside the render of the Event ponent. Could you show the code? – Fabian Schultz Commented Jan 3, 2017 at 15:44
• Perfect that actually helped. I found the error in the child ponent. Thank you! – jordanpowell88 Commented Jan 3, 2017 at 15:57
• this.state.events should be array. and array can contain any object. then you can use map on it. – Khalid Azam Commented Jan 4, 2017 at 7:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

To be a little more organized your ponent should look something like the code below. In your parent ponent, you can run a function that returns an array of your Event child ponents. 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 ponent:
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>
    )
  }
}

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>
        )