How to perform some action after some time?

Question

JavaScript

Yes, the essence of the question does not reflect my question, but it is indirectly related to it ...
The problem is the following: there is a "catalog" button, when you hover over it with the cursor, a directory with links drops out. This directory lies in the same div with the button, and the onMouseEnter event hangs on the div (the directory opens) and the onMouseMove event (the directory closes). I want to make it so that there would be some time after the cursor left the directory, before it was closed, and so that I could return the cursor back and nothing would be closed.
I'm doing this in react.
Somewhere I saw a similar system, timeouts and intervals were used there. like there was a condition in the interval and when the condition was true - the code inside was executed and a clearInterval was made. But I can't make friends with this scheme with React

Answer 1

onMouseLeave do this.timeout = setTimeout(callback, duration);
onMouseEnter doclearTimeout(this.timeout);