React on hover reveal

import React, {useState} from "react";

export default function ShowButtonHover() {
    const [style, setStyle] = useState({display: 'none'});

    return (
        <div className="App">
            <h2>Hidden Button in the box. Move mouse in the box</h2>
            <div style={{border: '1px solid gray', width: 300, height: 300, padding: 10, margin: 100}}
                 onMouseEnter={e => {
                     setStyle({display: 'block'});
                 }}
                 onMouseLeave={e => {
                     setStyle({display: 'none'})
                 }}
            >
                <button style={style}>Click</button>
            </div>
        </div>
    );
}

Source: stackoverflow.com

Similar codes

0 vote356 views1 answer
Input type disappear side scroll react
Javascript React
18 votes372 views6 answers
Uselocation react
Javascript React
0 vote343 views1 answer
React native scrollview scrollto()
Javascript React
9 votes328 views3 answers
React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Javascript React
3 votes332 views2 answers
React api call
Javascript React
0 vote313 views3 answers
React-hook-form input
Javascript React
3 votes316 views2 answers
React router hooks
Javascript React
140 votes557 views5 answers
React js installation
Javascript React
0 vote347 views1 answer
Native module reactnativepushnotification tried to override rnpushnotification
Javascript React
2 votes343 views1 answer
How to dynamically show image from local storage in react native
Javascript React