Action on window resize in React

291
August 12, 2017, at 07:52 AM

I am trying to make a resize action which will return the width of the window and dynamically render it using react.

This is what i got:

class Welcome extends React.Component { 
    constructor() { 
        super(); 
        this.state = { 
          WindowSize : window.innerWidth 
        } 
        this.handleResize = this.handleResize.bind(this); 
    } 
    handleResize(WindowSize, event) { 
        this.setState({WindowSize: window.innerWidth}) 
    } 
    render() { 
    return <h1  onresize={this.handleResize(this.state.WindowSize)} hidden={(this.state.WindowSize  < 1024) ? "hidden" : ''}>Hello</h1>; 
  } 
} 
ReactDOM.render( 
   <Welcome/>, 
   document.getElementById('root') 
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
  <div id="root"> 
</div>
This works whenever i reload a page but not when i am changing window size by itself.

Answer 1

When you change the window size - the size of the h1 element will not necessary change, so it isn't guaranteed that your code will run.

What you can do is use the DOM event of resize on the window element to call your function:

class Welcome extends React.Component { 
    constructor() { 
        super(); 
        this.state = { 
          WindowSize : window.innerWidth 
        } 
        this.handleResize = this.handleResize.bind(this); 
    } 
    componentDidMount() { 
      window.addEventListener("resize", this.handleResize); 
    } 
    componentWillUnmount() { 
      window.addEventListener("resize", null); 
    } 
    handleResize(WindowSize, event) { 
        this.setState({WindowSize: window.innerWidth}) 
    } 
    render() { 
    return <h1 hidden={(this.state.WindowSize  < 1024) ? "hidden" : ''}>Hello</h1>; 
  } 
} 
ReactDOM.render( 
   <Welcome/>, 
   document.getElementById('root') 
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
  <div id="root"> 
</div>

READ ALSO
Javascript - React destructuring array

Javascript - React destructuring array

I am trying to learn ReactJS and I'm having some trouble understanding the destructuring occurring in the following snippet:

328
Dynamically change the &lt;source&gt; element of a video

Dynamically change the <source> element of a video

I have created a game using html, css and javascript only, I am trying, every time the game ends, to play a videoI have these videos in a folder, and they are named "video1

139
How to combine lambda and javascript forEach loops?

How to combine lambda and javascript forEach loops?

Here's what I've tried and for some reason the event listeners are not getting called:

353
Set scroll amount with javascript

Set scroll amount with javascript

So my problem is that I have 3 full height div's but when you scroll down you don't reach the top of the next div but lower than that (like 30px or so)

275