in that case if you first time click show its show hello world its right but again if you click on show its should not work. now its became a toggle but how can I do after one click its not working means after showing the hello world its should not again hide if you want to click again. I'm also use pointer Event its also not working
import React, { useState } from "react";
export default function DropDown() {
const [show,setShow]=useState(false)
return (
<>
{show?<h1>hello world</h1>:null}
<div onClick={()=>{setShow(!show);return false;}}><span>show</span></div>
</>
)
}
You can simply modify your onClick with one time value set
onClick={()=>{setShow(true)}} //one time set
Full code
import React, { useState } from "react";
export default function DropDown() {
const [show,setShow]=useState(false)
return (
<>
{show?<h1>hello world</h1>:null}
<div onClick={()=>{setShow(true)}}><span>show</span></div>
</>
)
}
If you want to disable that button after show update, you can set disabled={show} to that button
import React, { useState } from "react";
export default function DropDown() {
const [show,setShow]=useState(false)
return (
<>
{show?<h1>hello world</h1>:null}
<div onClick={()=>{setShow(true)}} disabled={show}><span>show</span></div>
</>
)
}