in React JS by
Q:

How to re-render the view when the browser is resized?

1 Answer

0 votes
by

You can listen to the resize event in componentDidMount() and then update the dimensions (width and height). You should remove the listener in componentWillUnmount() method.

class WindowDimensions extends React.Component {
  constructor(props){
    super(props);
    this.updateDimensions = this.updateDimensions.bind(this);
  }
   
  componentWillMount() {
    this.updateDimensions()
  }

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

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

  updateDimensions() {
    this.setState({width: window.innerWidth, height: window.innerHeight})
  }

  render() {
    return <span>{this.state.width} x {this.state.height}</span>
  }
}
Click here to read more about React JS
Click here to read more about Insurance

Related questions

0 votes
asked Jul 2, 2019 in React JS by Venkatshastri
0 votes
asked Jul 2, 2019 in React JS by Venkatshastri
0 votes
asked Mar 2, 2020 in React JS by RShastri
0 votes
asked Dec 14, 2019 in React JS by AdilsonLima
+1 vote
asked Jan 16, 2020 in QuickTest Professional (QTP) by JackTerrance
0 votes
asked Oct 24, 2019 in HTML by SakshiSharma
...