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

Somewhere you are trying to render an element of the array as child of some element/component. But it doesn't seem to be in the code you posted. — Felix Kling
– Felix Kling, Commented Sep 24, 2015 at 13:55
this is what the component it is trying to render look like: gist.github.com/hilarl/71a9f9029e90c9e68c2f — hilarl
– hilarl, Commented Sep 24, 2015 at 14:40

sanjaypojo · Accepted Answer · 2015-09-24 19:17:00Z

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.

answered Sep 24, 2015 at 19:17

sanjaypojo

814 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Trouble iterating through Array on ReactJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related