How to work with the resize event in react and how to determine the screen width and change the state when loading?

Question

React

this.state = {
            perpage: 24,
        }

at 768 I need to reduce the number of cards in perpage: 12 and do the same if the screen is 768 when rendering

Answer 1

onResize = () => {
  this.setState(() => ({
    /* ... */
  }));
}

componentDidMount() {
  window.addEventListener('resize', this.onResize);
  this.onResize();
}

componentWillUnmount() {
  window.removeEventListener('resize', this.onResize);
}

https://jsfiddle.net/jmz39vwo/