Trouble iterating through Array on ReactJs

Question

I am trying to iterate through this array:

events: [{
      "id": "123",
      "key": "1",
      "type": "academic",
      "time": "2015 - 2016",
      "title": " MSc in Software Engineering",
      "place": "University of Oxford",
      "location": "Oxford, United Kingdom",
      "description": "Lorem impsum",
      "gallery": []
    },
    {
      "id": "234",
      "key": "2",
      "type": "professional",
      "time": "2015 - 2016",
      "title": " Software Engineer",
      "place": "University of Oxford",
      "location": "Oxford, United Kingdom",
      "description": "Lorem impsum",
      "gallery": [
        {
          "index": 11,
          "url": "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash2/v/t1.0-1/p160x160/10923196_10204583699694173_6145976884213630323_n.jpg?oh=bd235908314ecf0ab5afa8d3f92f5abf&oe=567B51F9&__gda__=1450897067_285c7c8c720c0f130453b37e9ff9b2f8"
        }
      ]
    },
    {
      "id": "567",
      "key": "3",
      "type": "misc",
      "time": "2015 - 2016",
      "title": " MSc Software Engineering",
      "place": "University of Oxford",
      "location": "Oxford, United Kingdom",
      "description": "Lorem impsum",
      "gallery": [
            {
          "index": 1,
          "url": "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash2/v/t1.0-1/p160x160/10923196_10204583699694173_6145976884213630323_n.jpg?oh=bd235908314ecf0ab5afa8d3f92f5abf&oe=567B51F9&__gda__=1450897067_285c7c8c720c0f130453b37e9ff9b2f8"
        }
      ]
    }
  ]

my code:

events.map(( timelineEvent ) => {
      let directions;
      if (timelineEvent % 2 == 0) {
        directions = "direction-r";
      } else {
        directions = "direction-l"
      }
      return (
        <li key={timelineEvent.id}>
          <TimelineEvent 
            type = {timelineEvent.type}
            time = {timelineEvent.time}
            title = {timelineEvent.title}
            place = {timelineEvent.place}
            location = {timelineEvent.location}
            description = {timelineEvent.description}
            direction = {directions}>
            <div>gallery</div>
            <TimelineEditButton
              deleteClick={timelineEvent.id} 
              dataId={ timelineEvent.id}
              editClick={this.openPartial.bind(this, "editEventPartial")} />
          </TimelineEvent>
        </li>
      );
    });

But getting the following error:

Error: Invariant Violation: Objects are not valid as a React child (found object with keys {id, key, type, time, title, place, location, description, gallery}). If you meant to render a collection of children, use an array instead or wrap the object using React.addons.createFragment(object).

I could not figure out what is causing this since I am new to React. I am using React 0.14-rc1.

Could anybody please point out the problem? Thanks

Answer 1

You've used timelineEvent % 2 == 0, maybe that's the problem? Since timelineEvent is an object, I'm guessing you wanted to do this on the "index" or on timelineEvent.id, rather than the entire object.