title: How can i change classname values dynamically base on if the id of data i'm mapping is Odd or Even? in reactjs
body: <p>Goodday everyone, i have list of text and images in a div, i used flex display and flex direction row for each div, however, during the mapping of this data, if the id is odd number, i want to reverse the flex row, if it's even number it should not reverse, that way one div will have image right side, and the other will have image left side</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import { UiData } from &quot;./UiDesignData&quot;;
  
  function UiComp({ text, imageUrl, imgUrl }) {
    const [toggleClass, setToggleClass] = useState(false);
  
    const handleToggle = () =&gt; {
      setToggleClass(!toggleClass);
      // console.log(ids);
    };
  
   
  
    return (
      &lt;div className=&quot;d-flex flex-column flex-md-row col-12 UIs align-items-center justify-content-between&quot;&gt;
        &lt;div className={UiData.indexOf % 3 === 3 ? &quot;flex-row-reverse &quot; : &quot; &quot;}&gt;
          {&quot; &quot;}
          &lt;p&gt; {text} &lt;/p&gt;{&quot; &quot;}
        &lt;/div&gt;
        &lt;div className=&quot;d-flex flex-column align-items-end ImgCon col-12 col-md-6&quot;&gt;
          &lt;div className={toggleClass ? &quot;ImgHoverM &quot; : &quot;ImgHovers&quot;}&gt;
            &lt;img src={imageUrl} alt=&quot;&quot; className=&quot;col-8&quot; /&gt;
          &lt;/div&gt;
          &lt;img src={imgUrl} alt=&quot;&quot; className=&quot;col-12&quot; /&gt;
          &lt;div className=&quot;TapView&quot;&gt;
            &lt;button id=&quot;UI1&quot; onClick={handleToggle} className=&quot;text-center&quot;&gt;
              {&quot; &quot;}
              Tap to View{&quot; &quot;}
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default UiComp;
  </code></pre>
  <p>Example:
  <img src="https://i.stack.imgur.com/DRkaR.jpg" alt="Example output" /></p>