React setState with media queries

Question

Is there any way to setState({collapse: true}) for mobile screens only? How can i toggle the this.state.collapse based on current window size?

import React, { Component } from 'react';
import { Route, Redirect } from 'react-router-dom';

import $ from 'jquery';
import { Container, Row, Col, Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';
import { css } from 'glamor';
import { ToastContainer } from 'react-toastify';
import toast from '../toast';
import { BarLoader } from 'react-spinners';

//  ----------------   Custom components
import DashboardNavbar from '../DashboardPage/Dashboard/DashboardNavbar/DashboardNavbar';
import Footer from '../Footer/Footer';

import './VideoPage.css';

class VideoPage extends Component {

  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      collapsed: false
    };

    this.toggleLoader = this.toggleLoader.bind(this);
    this.notifySuccess = this.notifySuccess.bind(this);
    this.notifyError = this.notifyError.bind(this);
    this.toggleNavbar = this.toggleNavbar.bind(this);
  }

  notifySuccess(msg) {
    toast.success(msg);
  }

  notifyError(msg) {
    toast.error(msg);
  }

  toggleLoader() {
    this.setState({
      loading: !this.state.loading
    });
  }

  // isAuthenticated() {
  //   const token = localStorage.getItem('authToken');
  //   if (token) {
  //     return true;
  //   }
  // }
  toggleNavbar() {
    this.setState({
      collapsed: !this.state.collapsed
    });
  }
  render() {
    const currentLocationPath = this.props.location.pathname;
    const videoPage = currentLocationPath.includes('/video');
    return (
      <div className="VideoPage d-flex flex-column flex-grow">
        <div className="VideoPageMain d-flex flex-grow">
          <Container fluid>
            <Row>
              <DashboardNavbar videoPage={videoPage} />
            </Row>
            <Row>
              <Col xs="12" sm="3">
                <div className="sidebarMenu">
                  <Navbar dark>
                    <NavbarBrand className="mr-auto">Menu</NavbarBrand>
                    <NavbarToggler onClick={this.toggleNavbar} className="mr-2 d-sm-none" />
                    <Collapse isOpen={!this.state.collapsed} navbar>
                      <Nav navbar>
                        <NavItem>
                          <NavLink href="/components/">Components</NavLink>
                        </NavItem>
                        <NavItem>
                          <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
                        </NavItem>
                      </Nav>
                    </Collapse>
                  </Navbar>
                </div>
              </Col>
              <Col xs="12" sm="9">.col</Col>
            </Row>
          </Container>
        </div>
        <Footer />
      </div>
    )
  }
}

export default VideoPage;

basically i want the list to be hidden on mobile as there is button to toggle it which is hidden from tablet size and onwards.

Answer 1

It looks like there's a library for that: https://github.com/contra/react-responsive

Otherwise, you could add a listener to the resize event of window and fire that listener in the constructor to check the size.