Logic inside loop not working on ReactJs

Question

The condition inside the loop does not seem to be called or is not functioning:

let events = eventData.map(( timelineEvent ) => {
      let directions;
      if (timelineEvent % 2 == 0) {
        directions = "direction-r";
      } else {
        directions = "direction-l"
      }
      return (
        <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>
      );
    });

The data renders but for some reason the condition does not seem to have any affect. Any help? Thanks

Josh Beam · Accepted Answer · 2015-09-24 16:27:56Z

1

You're querying object properties on timelineEvent (for example, timelineEvent.type), but you're expecting to also be able to use the modulus operator on the object. The modulus operator should be used with a number. That's why your condition is not being met.

You can see that calling the modulus operator on an object and using the "un-strict" equality operator == will always result in false. Here's the output from my console, as an example:

Edit

If you need the index, do this:

let events = eventData.map((timelineEvent, i) => {
  if(i % 2 === 0) {
    // do something
  }

edited Sep 24, 2015 at 16:27

answered Sep 24, 2015 at 16:16

Josh Beam

19.9k5 gold badges48 silver badges69 bronze badges

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

1 Comment

hilarl Over a year ago

is there anyway to get the index of the current array item?

Collectives™ on Stack Overflow

Logic inside loop not working on ReactJs

1 Answer 1

Edit

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related