You can use the onMouseEnter() listener in React to know when an element is being hovered with the mouse. For example, if you wanted to show a text in React when you hover over a heading (or any other element), you would use the following code:

import React, { useState } from 'react';

function App() {
  const [visible, setVisible] = useState(false); // initiate it at false

  return (
    <div>
      <h2
        onMouseEnter={() => setVisible(true)}
        onMouseLeave={() => setVisible(false)}>
        Move Mouse Towards Me
      </h2>
      {visible && ( // you can use "&&" since there is no else in this case
        <div>Text to show</div>
      )}
    </div>
  );
}

export default App;