CODEWITHSUNDEEP
javascriptcss
Newbie_developer
Newbie_developer

Reputation: 273

Make a button appear after some time in react

I want to make a button appear after 6 secs.

I tried the setTimeout function but no can't figure out how to hide the div initially and then make it appear after some time>

Also, I wrote a function just to apply classes after 6 secs, even that is also not working.

Could someone help to understand what I'm doing wrong?









const getButtonClasses =()=>{

    function buttonStyle() { 
        return "btnn btnn-primary"
     }
 
     setTimeout(buttonStyle(), 6000);

}


.btnn {
    line-height: 3.6 * 10px;
    text-align: center;
    white-space: nowrap;
    font-weight: 500;
    border-radius: 4px;
    border: 0;
    display: inline-block;
    text-decoration: none;
    padding-top: 0.3 * 10px;
    padding-bottom: 0.3 * 10px;
    margin: 1 * 10px 0;
    width: 230px;
    margin-top: 2 * 10px;
    margin-bottom: 2 * 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bolder;
  }


.btnn-primary {
    background: #5567e7;
    color: var(--color-headings);
 }

.hide {
display: none
}


<button className={getButtonClasses()}>Got it. Let's proceed</button>

Upvotes: 0

Views: 452

Answers (1)

Animesh Mondal
Animesh Mondal

Reputation: 106

The following code will do it

const [showBtn,setShowBtn] = useState(false);

useEffect(()=>{
 setTimeout(()=>{
   setShowBtn(!showBtn);
 },2000)
},[])

return (
   <div>
    {showBtn && <button> btn </button>}
   </div>
)

I'm conditionally rendering the button component

Upvotes: 3

Related Questions