How to disable a div after click once in react-CodePudding

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>
    </>
  )
}

CodePudding user response：

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>
    </>
  )
}