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

1 vote197 views1 answer
React native grid view
Javascript React
18 votes200 views1 answer
Get specific characters from state variable reactjs
Javascript React
1 vote190 views1 answer
React native image disable fade in onload
Javascript React
11 votes193 views2 answers
Shadow using react native
Javascript React
16 votes184 views1 answer
Deploy react app netlify
Javascript React
2 votes191 views1 answer
React-moralis
Javascript React
0 vote194 views1 answer
Disable key enter react-hook-form
Javascript React
3 votes179 views1 answer
InnerWidth react
Javascript React
0 vote177 views1 answer
Import Bootstrap to React Redux CRUD App
Javascript React
0 vote175 views1 answer
Styling scrollview height in react native
Javascript React