how to change state on window resize?

Question

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.

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.

The idea that i got in my mind is to make an event that change a state when a certain breakpoint reached:

  state: {
    itemsNum: 1
  }

  const createSlides  = () => {
        let slides = [];
        let itemsNum = this.state.itemsNum;

        for (let i = 0; i < 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

This is just the incomplete idea in my mind, but i need the complete solution that make this idea work successfully.

What is the better way to achieve that in the term of react??

Answer 1

Well, to talk about my opinion, you can use "event handlers".

Like this: window.addEventListener('onresize', createSlides)

As the time goes, I didn't complete the whole things through, but if you want to know more about this or you are interested in this method, I can tell you the exact method.

Answer 2

You can use window.onresize.

window.onresize = function(event) { ... };