title: Render components with different style based on a boolean state
body: <p>I'm writing this simple web application for displaying employees. To display each employee, I use a <strong>Card</strong> component, that gets rendered inside a <strong>CardGrid</strong> component, based on the number of employees there is.</p>
  <p>What I'm trying to do is render each card with a different background value for visual clarity. I try to store a boolean state inside the CardGrid, that gets toggled by <strong>setState</strong> setter method, that gets passed into each card and called on the render of each individual component.</p>
  <p>My issue is, that instead of the Cards having each different color, their color is the same, but it keeps flicking between the two values really fast (epilepsy warning lol).</p>
  <p>Does anyone know what I'm missing? Why is the state shared among all of the Card instances?</p>
  <pre><code>//CardGrid.js
  export default function CardGrid(props){
    const {data} = props;
    const [colorSwitch, setColorSwitch] = useState(true)
    
  
    return(
      &lt;div className=&quot;card-grid&quot;&gt;
        {data.map((d)=&gt;
          &lt;Card
          name={d.name}
          lastName={d.lastName}
          present={d.present}
          time={d.time}
          colorSwitch={colorSwitch}
          setColorSwitch={setColorSwitch}
          /&gt;
        )}
      &lt;/div&gt;
    )
  }
  </code></pre>
  <pre><code>//Card.js
  export default function Card(props){
    const {name, lastName, present, time, colorSwitch, setColorSwitch} = props
    
    useEffect(()=&gt;{
      setColorSwitch(!colorSwitch)
    })
    return (
      &lt;div
      className=&quot;card&quot;
      style={present?(colorSwitch? {backgroundColor: &quot;green&quot;}:{backgroundColor: &quot;red&quot;}):{backgroundColor: &quot;grey&quot;}}&gt;
        &lt;p className=&quot;card-text&quot;&gt;{name} {lastName}&lt;/p&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>