SUNIL WAT????

why-u-no-work.js

import React, { useState, useEffect } from 'react'
import breakpoint from 'styled-components-breakpoint'
import { Col, Row, Grid } from '../grid'

const GridDebugger = () => {
  const [showGrid, toggleShowGrid] = useState(false)

  const handleKey = ev => {
    if (ev.key === 'g' && ev.ctrlKey) {
      console.log('lol')
      toggleShowGrid(!showGrid)
    }
  }

  useEffect(
    () => {
      window.addEventListener('keyup', handleKey)

      return () => window.removeEventListener('keyup', handleKey)
    },
    []
  )

  return showGrid ? (
    <Container>
      <Row>
        {Array.from(new Array(12)).map((el, idx) => (
          <Column key={idx} width={[1, 1, 1, 1, 1 / 12]} block={false}>
            <ColumnContent />
          </Column>
        ))}
      </Row>
    </Container>
  ) : null
}

export default GridDebugger

works.js

import React, { useState, useEffect } from 'react'
import breakpoint from 'styled-components-breakpoint'
import { Col, Row, Grid } from '../grid'

const GridDebugger = () => {
  const [showGrid, toggleShowGrid] = useState(false)

  const handleKey = ev => {
    if (ev.key === 'g' && ev.ctrlKey) {
      console.log('lol')
      toggleShowGrid(!showGrid)
    }
  }

  useEffect(
    () => {
      window.addEventListener('keyup', handleKey)

      return () => window.removeEventListener('keyup', handleKey)
    },
    [showGrid]
  )

  return showGrid ? (
    <Container>
      <Row>
        {Array.from(new Array(12)).map((el, idx) => (
          <Column key={idx} width={[1, 1, 1, 1, 1 / 12]} block={false}>
            <ColumnContent />
          </Column>
        ))}
      </Row>
    </Container>
  ) : null
}

export default GridDebugger