React getElementById TypeScript

Question

When I use this in Pure React

const Fleet = () => {

    const closeSm = () => {
        document.getElementById("mysideMenu").style.width = '0';
        document.getElementById("pg-content").style.marginLeft='0';
    }

    const openSM = () => {
        document.getElementById("mysideMenu").style.width = '250px';
        document.getElementById("pg-content").style.marginLeft='250px';
    }

    const sideMenu = () => (
        <>
            <div id='mysideMenu' className='sidemenu'>
                <a href='javascript:void(0)' className='close' onClick={closeSm} >&times;</a>
            <div className='sm-wrapper'>
                <a href='#'>Home</a>
                <a href='#'>Portfolio</a>
                <a href='#'>About</a>
                <a href='#'>Contact</a>
            </div>
            </div>
            <div id='pg-content'>
                <div style={{fontSize:'50px', cursor:'pointer', color:'#5b5b5b'  }} onClick={openSM} >&#9776;</div>
                    <h1>Side menu</h1>
                    <span>Tutorial</span>
            </div>
        </>
    )

It is working very well, but when I change to TypeScript like this:

const Fleet = () => {

    const myElement: HTMLElement | any = document.getElementById('mysideMenu');
    const myContent: HTMLElement | any = document.getElementById('pg-content');
    
    
    const closeSm = () => {
        myElement.style.width = '0';
        myContent.style.marginLeft='0';
    }

    const openSM = () => {
        myElement.style.width = '250px';
        myContent.style.marginLeft='250px';
    }

    const sideMenu = () => {
        
        
        
        return(
        <>
            <div id='mysideMenu' className='sidemenu'>
                <button style={{fontSize:'60px'}} className='close' onClick={closeSm} >&times;</button>
            <div className='sm-wrapper'>
                <img src={Ferte} alt='/'/>
                <h2 className='text-center mt-5'>Saint Georges</h2>
                <a href='#'>About</a>
            </div>
            </div>
            <div id='pg-content'>
                <div style={{fontSize:'30px', cursor:'pointer', color:'#5b5b5b'  }} onClick={openSM} >&#9776;</div>
                    <h1>Side menu</h1>
                    <span>Tutorial</span>
            </div>
        </>)
    }

It is not working very well. It is to open a side bar. I don't know why I have this problem!

this are my complete Components. the first one with Pure React and the second one with Typescript.. as you see is the same.. but for any reason in typescript doesnt work, i mean , if for any reason i edit the pixels and i save in the VisualCode magically will work but if i reload the page doesn't work.. i know is a weird problem is because of this i ask here

Answer 1

You rarely want to manipulate the DOM directly for React components.

The best solution here is to use state to keep track of whether the sidebar is open or not, then render the correct styles depending on the open state:

const Fleet = () => {
    const [isSidebarOpen, setIsSidebarOpen] = React.useState<boolean>(false);

    const closeSm = () => {
        setIsSidebarOpen(false);
    }

    const openSM = () => {
        setIsSidebarOpen(true);
    }

    return(
        <>
            <div id='mysideMenu' className='sidemenu' style={{ width: isSidebarOpen ? 250 : 0 }}>
               ...
            <div id='pg-content' style={{ marginLeft: isSidebarOpen ? 250 : 0 }}>

If you absolutely WANT to manipulate the DOM directly, use a ref instead:

const Fleet = () => {
    const myElement = React.useRef<HTMLElement>(null);
    const myContent = React.useRef<HTMLElement>(null);

    const closeSm = () => {
        myElement.current.style.width = '0';
        myContent.current.style.marginLeft='0';
    }

    const openSM = () => {
        myElement.current.style.width = '250px';
        myContent.current.style.marginLeft='250px';
    }

    return(
        <>
            <div id='mysideMenu' className='sidemenu' ref={myElement}>
               ...
            <div id='pg-content' ref={myContent}>