title: How to set a css property (background-color) dynamically in React?
body: <p>I have a slideshow based on an array of objects with its characteristics, one of them is the <code>background-color</code> of the current slide. I have a property called <code>bg</code> which stores it. This is what I am using to set each background-color, which changes to every image, however I am using an <code>inline style</code> to do that.</p>
  <p>I'd like to know if there is a way to do that without using this inline style?</p>
  <p>Here is a sample of my code:</p>
  <pre><code>import React from 'react'
  import { Fragment } from 'react'
  
  import classes from './MainPageHeader.module.css'
  
  const MainPageHeader = props =&gt; {
  
      let [minorSlideImg, setMinorSlideImg] = React.useState(0)
  
      let minorSlides = [
          {
              img: require('../../../assets/images/Header/MinorSlider/imgSolo1-mainpage.png'),
              alt: 'Produto 1',
              linkText: ['PRODUTO 5', '$ 19.99'],
              productId: 5,
              bg: 'rgb(151, 105, 105)'
          },
          {
              img: require('../../../assets/images/Header/MinorSlider/imgSolo2-mainpage.png'),
              alt: 'Produto 2',
              linkText: ['PRODUTO 13', '$ 199.99'],
              productId: 13,
              bg: '#fad3e0'
          },
          {
              img: require('../../../assets/images/Header/MinorSlider/imgSolo3-mainpage.png'),
              alt: 'Produto 3',
              linkText: ['PRODUTO 10', '$ 499.99'],
              productId: 10,
              bg: '#ccc'
          },
          {
              img: require('../../../assets/images/Header/MinorSlider/imgSolo4-mainpage.png'),
              alt: 'Produto 4',
              linkText: ['PRODUTO 11', '$ 999.99'],
              productId: 11,
              bg: 'rgb(238, 225, 183)'
          },
      ]
      
      const passSlideHandler = () =&gt; {
          if (minorSlideImg &lt; minorSlides.length - 1) {
              setMinorSlideImg(minorSlideImg + 1)
          } else {
              setMinorSlideImg(0)
          }
      }   
      
      React.useEffect(() =&gt; {
          const interval = setTimeout(() =&gt; {
              passSlideHandler()
          }, 5000);
          return () =&gt; clearTimeout(interval);
      });    
  
  
      return (
          &lt;Fragment&gt;
              &lt;div 
                  className={classes.MinorSlider_subContainer} 
                  style={{backgroundColor: minorSlides[minorSlideImg].bg}} // &lt;= This is what I'd like to remove
              &gt;
                  &lt;img 
                      src={minorSlides[minorSlideImg].img}
                      alt={&quot;img-1&quot;} 
                  /&gt;
              &lt;/div&gt;
          &lt;/Fragment&gt;
      )
  }
  
  export default MainPageHeader
  </code></pre>
  <p>CSS:</p>
  <pre><code>.MinorSlider_subContainer {
      height: 65%;
      width: 50%;
      background-color: #ccc;
  }
  
  .MinorSlider_subContainer img {
      max-width: 100%;
  }
  
  .MinorSlider_subContainer div {
      position: relative;
      background-color: white;
      width: 100%;
      height: 65px;
  }
  
  .MinorSlider_subContainer div &gt; *{
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
  
      width: 100%;
      height: 100%;
      padding-left: 25px;
      text-decoration: none;
  }
  
  .MinorSlider_subContainer div p {
      margin: 0;
      color: rgb(75, 75, 75);
  }
  </code></pre>
  <p>As can be seen, every five seconds the index of <code>minorSlides</code> changes, therefore, the slide that is being shown changes as well. This index is used to refer to each feature of the current slide.</p>
  <p>So, is there a way to remove this inline style and make my JSX cleaner?</p>
  <p>If I was using HTML, CSS and JS I could do that with JQuery or even plain JS, but I don't know how to do that here. I know I could create the element with a loop, but I'd like to keep changing only the index and not the whole element.</p>
  <p>Here is the sildeshow:</p>
  <p><a href="https://i.stack.imgur.com/73B7j.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/73B7j.gif" alt="enter image description here" /></a></p>