javascript - Disable onClick event when device viewport is larger than a specified size

Question

This question already has answers here: question from:https://stackoverflow.com/questions/65646298/disable-onclick-event-when-device-viewport-is-larger-than-a-specified-size

Answer 1

Would this help: I am using window.innerWidth to check the width of the viewport and setting onClick accordingly on condition.

import React from "react";
import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { addClass: false, vw: window.innerWidth };
  }
  toggle() {
    console.log("Toggle Method");
  }

  notToggle() {
    console.log("Not Toggling");
  }
  render() {
    return (
      <div
        onClick={
          this.vw > 800 ? this.toggle.bind(this) : this.notToggle.bind(this)
        }
      >
        <div className="icon">Hellow Hellow</div>
      </div>
    );
  }
}

export default App;