title: Trying to conditional render css to on alternating items in an array with useState in React with MUI
body: <p>I have an object of arrays that I'm mapping over called <code>featuredProj</code>, and on alternate items, I want the CSS to conditionally render as not to repeat so much code. Using <code>useState</code> in the <code>handleSide</code> function I get the error <code>too many rerenders</code>. How can I solve this, or is there a better solution to rendering jsx while mapping over an array of objects.</p>
  <pre><code>const useStyles = makeStyles(() =&gt; ({
    title: {
      textAlign: (side) =&gt; (side ? &quot;right&quot; : &quot;left&quot;),
    },
  }));
  
  const FeaturedProjects = () =&gt; {
    const [side, setSide] = useState(true);
    const classes = useStyles(side);
  
    const handleSide = (project, index) =&gt; {
      if (index === 0 || index % 2 === 0) {
  
  // I tried setSide(false), setSide(prev =&gt; !prev)
          
        return (
          &lt;Grid Container key={index}&gt;
                &lt;Typography className={classes.title}&gt;{project.title}&lt;/Typography&gt;
          &lt;/Grid&gt;
        );
      } else {
        return (
          &lt;Grid Container key={index}&gt;
                &lt;Typography className={classes.title}&gt;{project.title}&lt;/Typography&gt;
          &lt;/Grid&gt;
        );
      }
    };
  
    return (
      &lt;Container&gt;
        {featuredProj.map((proj, ind) =&gt; (
          &lt;Reveal duration=&quot;2000&quot; effect=&quot;fadeInUp&quot;&gt;
            {handleSide(proj, ind)}
          &lt;/Reveal&gt;
        ))}
      &lt;/Container&gt;
    );
  };
  </code></pre>
  <p>Thanks in advance for any assistance!</p>