Hide div with buttons when user uses a touch screen in a functional react component

Question

I would like to hide a div when the user uses a touchscreen. It's a react js functional component.

The div I want to hide looks like this:

    <div className="scrollButtons">
                    <button
                        className={count <= 0 ? 'buttonLeftOpacity' : 'buttonLeft'}
                        type="button"
                        onMouseDown={() => clickHandlerLeft()}
                    >
                        {'<'}
                    </button>
                    <button className="buttonRight" type="button" onMouseDown={() => clickHandlerRight()}>
                        {'>'}
                    </button>
                </div>
            </>

The code I use to sense if the user is on a touch screen is this:

    window.addEventListener('touchstart', function userTouch() {
        console.log(userTouch());
    });

How can I use that code to hide the div when a user uses a touch screen? Thank you in advance!

Answer 1

So, This is how I solved it. By using "useState" from react, I set show by default to true, and to false if the user is on a touchscreen. I then use that state to show or hide the touchbuttons-div if the value is true or not.

const [show, setShow] = useState(true);

    window.addEventListener('touchstart', function userTouch() {
        setShow(false);
    })

{show ? (
                <>
                    <div className="scrollButtons" id="scrollButtons">
                        <button
                            className={count <= 0 ? 'buttonLeftOpacity' : 'buttonLeft'}
                            type="button"
                            onMouseDown={() => clickHandlerLeft()}
                        >
                            {'<'}
                        </button>
                        <button className="buttonRight" type="button" onMouseDown={() => clickHandlerRight()}>
                            {'>'}
                        </button>
                    </div>
                </>
            ) : (
                <></>
            )}