How to replace a div with another div after hovering first div in react js (and vice-versa)

import React, { useState } from 'react';

function App() {
  const [isHovered, setIsHovered] = useState(false);

  const handleHover = () => {
    setIsHovered(true);
  };

  const handleLeave = () => {
    setIsHovered(false);
  };

  return (
    <div>
      {isHovered ? (
        <div
          onMouseEnter={handleHover}
          onMouseLeave={handleLeave}
        >
          {/* Content of the first div */}
          <h2>Hover over me</h2>
        </div>
      ) : (
        <div>
          {/* Content of the second div */}
          <h2>Hovered!</h2>
        </div>
      )}
    </div>
  );
}

export default App;

Comments

[Nwosa Tochukwu]

Bookmarked. Will utilize it in my project..

Thanks for sharing

[M. T. H. Titumir]

My pleasure