Property 'display' does not exist on type 'HTMLIonListElement'

Issue

I have this piece of code:

    const [isThreeDotsMenuOpen, setIsThreeDotsMenuOpen] = useState<boolean>(false);
        const threeDotsIcon = useRef<HTMLIonListElement>(null);
        // const threeDotsIcon = document.getElementsByClassName("login-three-dots-menu")[0] as HTMLIonListElement;
        const openLeaveMenu = () => {
            setIsThreeDotsMenuOpen(!isThreeDotsMenuOpen);
            let button = threeDotsIcon.current;
            if(isThreeDotsMenuOpen){
                if(button !== null)
                    button.display = "block";
            }
            else{
                if(button !== null)
                    button.display = "none";
            }
        }

The ref is defined in an IonList element but it says that display does not exist in this element. How can I make this work? I've seen other posts like these: post and it didn't work

Solution

You should use style property to update:

button.style.display = "block";

Answered By - Viet