0
import React, {Component, useState, useEffect} from 'react';
import {connect} from 'react-redux';
import BigHeader from './bigHeader';
import SmallHeader from './smallHeader';

function isSmall() {
    if(this.windowWidth < 1307){
        return true;
      }
      return false;
}

const [windowWidth, setWindowWidth] = useState(window.innerWidth);

function determineWidth() {
    const width = window.innerWidth;
    setWindowWidth(width);
    isSmall(width);
}

useEffect(() => {
    window.addEventListener("resize", determineWidth);

    return function() {
        window.removeEventListener("resize", determineWidth);
    }
})
class Header  extends Component {

    render() {
        return this.isSmall() ? <SmallHeader/> : <BigHeader/> 
    }
}

// export default connect(mapStateToProps, page);
export default Header;

I am getting an error from this line const [windowWidth, setWindowWidth] = useState(window.innerWidth);

I am trying to return a mobile/smaller header when the screen is < 1307 and return a different header when it is above that.

Uwe Allner
  • 3,399
  • 9
  • 35
  • 49
Nathan Takemori
  • 139
  • 1
  • 10

4 Answers4

1

If you want to use hooks (including custom hooks) you have to use them from functional components, here is your code with custom hooks and Header is a functional component instead of a class:

import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import BigHeader from './bigHeader';
import SmallHeader from './smallHeader';

const useWindowWidth = () => {
  function determineWidth() {
    const width = window.innerWidth;
    setWindowWidth(width);
  }
  const [windowWidth, setWindowWidth] = useState(
    window.innerWidth
  );
  useEffect(() => {
    window.addEventListener('resize', determineWidth);

    return function() {
      window.removeEventListener('resize', determineWidth);
    };
  },[]);
  return windowWidth;
};

function useIsSmall() {
  const windowWidth = useWindowWidth();
  if (windowWidth < 1307) {
    return true;
  }
  return false;
}

function Header(props) {
  const isSmall = useIsSmall();
  return isSmall ? <SmallHeader /> : <BigHeader />;
}

// export default connect(mapStateToProps, page);
export default Header;
HMR
  • 37,593
  • 24
  • 91
  • 160
0

You can not use the hooks outside the function.

Can you please move the code const [windowWidth, setWindowWidth] = useState(window.innerWidth); in function and then try it.

0

Try using Dimensions from React Native, this code should work: You can also update the windowWidth value every time you call the function isSmall():

import { Dimensions } from 'react-native'
const windowWidth = Dimensions.get('window').width;
const windowheight = Dimensions.get('window').height;

function isSmall() {
if(this.windowWidth < 1307){
    return true;
  }
  return false;
}

class Header  extends Component {

render() {
    return this.isSmall() ? <SmallHeader/> : <BigHeader/> 
    }
}

// export default connect(mapStateToProps, page);
export default Header;
P4uB0rd4
  • 175
  • 5
0

According to React Documentation :Hooks, hooks can only be used inside functional component

Roughly like this

import React, { useState } from 'react';
import { Dimensions } from 'react-native'
const windowWidth = Dimensions.get('window').width;
const windowheight = Dimensions.get('window').height;

function Example() {

  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  //Return something
  return (
    <div>

    </div>
  );
}
AvadaKedavra
  • 29
  • 1
  • 3