add or remove class when the window size is changed in react js-CodePudding

I am working on a project using react js and I am having trouble on adding and removing a class in element whenever the window size is changed. I have 3 div element rendered in a page, when the screen is less than or equal 768 only one div element should show, the other two elements will only be shown when their button was clicked. Well it works fine, but I am getting this error before the page renders everytime I change the size of the browser. TypeError: Cannot read properties of null (reading 'classList') I am thinking to use useState or useEffect but I dont know how to do that adding or removing class when the window size is changed. The classes that need to be added or removed contains display none and display block. Can someone please help me. I just need to know how to add or remove class whenever the window size is changed

 window.addEventListener('resize', function(event){

    if(window.innerWidth <= 768){
        document.getElementById("details").classList.remove("toggle-details");
        document.getElementById("convo").classList.remove("toggle-convo");
        document.getElementById("chats").classList.remove("toggle-chats");
    }
    else{
        document.getElementById("chats").classList.add("chats");
        document.getElementById("chats").classList.remove("toggle-chats");
        document.getElementById("details").classList.add("details");
        document.getElementById("details").classList.remove("toggle-details");
        document.getElementById("convo").classList.add("convo");
        document.getElementById("convo").classList.remove("toggle-convo");
        
    }
});

CodePudding user response：

You could update the state using useState(), and setting the width. Calling setWidth to update it whenever the window resizes, and then setting classes in render based on whether or not the width is bigger than 768

You could use something like this:

const Component = () => {
    const [width, setWidth] = useState(window.innerWidth)

    window.addEventListener('resize', function(event){
        setWidth(window.innerWidth)
    }

    return (
        <div className={width <= 768 ? "class1" : "class2 class3"}>
        </div> 
    )
}

CodePudding user response：

I would suggest to use the state for detecting the size.

ex:

const sample = () => {
 const [size, setSize] = setState(window.innerWidth)
 
 return <div className={size<= 768 ? 'classOne' : 'otherClass'}></div>

}

Then try to use library like react-resize-detector, You can get the sizes by adding a reference to the element.

If you do not want to use 3rd party library, you need to detect size change in componentDidMount or inside useEffect.

ex:

useEffect(() => {
const updateWindowDimensions = () => {
  setSize(window.innerWidth)
}
window.addEventListener('resize', updateWindowDimensions)
return () => window.removeEventListener('resize', updateWindowDimensions)
}, [])