title: Adding classNames to odd and even elements in ReactJs
body: <p>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 using JQuery but not sure how to get it done using ReactJs. I am quite new to ReactJS and using it for the first time on a large project. Below is my code:</p>
  
  <pre><code>class MainTimeline extends React.Component {
  
    render() {
  
      return (
        &lt;div className="timeline-container"&gt;
          &lt;h3&gt;Timeline&lt;/h3&gt;
          &lt;ul className="timeline"&gt;
            &lt;li&gt;
              &lt;div className="direction-r"&gt;
                &lt;div className="title-wrapper"&gt;
                  &lt;span className="title professional"&gt;
                    Declared bankrupcy
                  &lt;/span&gt;
                  &lt;span className="time-wrapper"&gt;&lt;span class="time"&gt;2015 - present&lt;/span&gt;&lt;/span&gt;
                &lt;/div&gt;
                &lt;div className="detail"&gt;
                  &lt;p className="place"&gt;Corporation&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;div className="direction-l"&gt;
                &lt;div className="title-wrapper"&gt;
                  &lt;span className="title academic"&gt;
                    Declared bankrupcy
                  &lt;/span&gt;
                  &lt;span className="time-wrapper"&gt;&lt;span class="time"&gt;2015 - present&lt;/span&gt;&lt;/span&gt;
                &lt;/div&gt;
                &lt;div className="detail"&gt;
                  &lt;p className="place"&gt;Corporation&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  
  }
  </code></pre>
  
  <p>Thanks</p>