title: React: Prevent scroll when modal is open
body: <p>I have a custom modal component. When it's open, there is no scrolling whatsoever in the background.</p>
  
  <p>I tried this code below:</p>
  
  <pre><code>componentDidMount() {
      document.body.style.overflow = 'hidden';
  }
  
  componentWillUnmount() {
      document.body.style.overflow = 'unset';
  }
  </code></pre>
  
  <p>Which seems to work at first, but when I use the modal component, in another page, there is no scroll even when the modal is closed.</p>
  
  <p>Is there a better solution for this?</p>
  
  <p>My modal component:</p>
  
  <pre><code>export class Modal extends React.Component {
  
  constructor(props) {
      super(props);
  }
  
  componentDidMount() {
      document.body.style.overflow = 'hidden';
  }
  
  componentWillUnmount() {
      document.body.style.overflow = 'unset';
  }
  
  render() {
      return (
          &lt;React.Fragment&gt;
              {this.props.showAt ?
                  this.props.show ?
                      &lt;div style={style} className={`${this.props.sectionName} ${modalTypeStyle ? modalTypeStyle : styles.modalWhite} ${modalTypeSize ? modalTypeSize : styles.modalSmall} ${!this.props.showAt ? styles.modalWhiteFixed : ""}`}&gt;
                          {this.props.arrowShape ? &lt;div className={arrowTypeStyle ? arrowTypeStyle : styles.triangleToprightWhite} /&gt; : null}
                          {this.props.children}
                      &lt;/div&gt;
                      : null
                  :
                  this.props.show ?
                      &lt;div className={`${this.props.className} ${styles.modal}`}&gt;
                          &lt;div style={style} className={`${this.props.sectionName} ${modalTypeStyle ? modalTypeStyle : styles.modalWhite} ${modalTypeSize ? modalTypeSize : styles.modalSmall} ${!this.props.showAt ? styles.modalWhiteFixed : ""}`}&gt;
                              {this.props.arrowShape ? &lt;div className={arrowTypeStyle ? arrowTypeStyle : styles.triangleToprightWhite} /&gt; : null}
                              {this.props.children}
                          &lt;/div&gt;
                      &lt;/div&gt; :
                      null}
          &lt;/React.Fragment&gt;
      )
    }
  }
  </code></pre>