title: how to change state on window resize?
body: <p>I am trying to create a multiple items per slide carousel that i need to change the number of items per slide with different screen breakpoints.</p>
  
  <p>For example, i want to show 4 items per slide when window width is bigger than 1200px, 3 between (992px - 1200px), 2 between (768 - 992px) and 1 for smaller screens. </p>
  
  <p>The idea that i got in my mind is to make an event that change a state when a certain breakpoint reached:</p>
  
  <pre><code>  state: {
      itemsNum: 1
    }
  
    const createSlides  = () =&gt; {
          let slides = [];
          let itemsNum = this.state.itemsNum;
  
          for (let i = 0; i &lt; products.length ; i = i + itemsNum) {
              slides.push(products.slice(i, i + itemsNum))
          }
  
          return slides;
      }
  
     const slides =  createSlides ();
  
  
     slides.map (........)// rendering the items in the slide
  
  </code></pre>
  
  <p>This is just the incomplete idea in my mind, but i need the complete solution that make this idea work successfully.</p>
  
  <p>What is the better way to achieve that in the term of react??</p>