Adding Classnames To Odd And Even Elements In Reactjs

I am trying to add the className 'direction-r' to the divs in the 'timeline' list that are even and className 'direction-l' to every other item (odd). I know how it can be achieved

Solution 1:

Instead of modifying the DOM, React allows you to define rendering logic inside the render method before the DOM is created:

var listItems
for( var i=0; i<4; i++) {
  listItems.push(
      <likey={i}><divclassName={'direction-'+(i%2 ? 'r':'l')}><divclassName="title-wrapper"><spanclassName="title professional">
              Declared bankrupcy
            </span><spanclassName="time-wrapper"><spanclass="time">2015 - present</span></span></div><divclassName="detail"><pclassName="place">Corporation</p></div></div></li>
  )
}

return (
  <divclassName="timeline-container"><h3>Timeline</h3><ulclassName="timeline">
      {listItems}
    </ul></div>
)

Solution 2:

This should work.

classMainTimelineextendsReact.Component {

        render() {
            var isEven = (your even odd logic);
            var directionClass = isEven ? 'direction-r' : 'direction-l';
            return (
                <divclassName="timeline-container"><h3>Timeline</h3><ulclassName="timeline"><li><divclassName={directionClass}><divclassName="title-wrapper"><spanclassName="title professional">
                                        Declared bankrupcy
                                    </span><spanclassName="time-wrapper"><spanclass="time">2015 - present</span></span></div><divclassName="detail"><pclassName="place">Corporation</p></div></div></li></ul></div>
            );
        }

    }