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.