How to disable a div after click once in react

Question

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 need to disable the div after the first click. Is that the ask? — Sarun UK
– Sarun UK, Commented Apr 6, 2022 at 8:08

Nick Vu · Accepted Answer · 2022-04-06 08:08:21Z

1

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

answered Apr 6, 2022 at 8:08

Nick Vu

15.6k5 gold badges29 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to disable a div after click once in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related