CODEWITHSUNDEEP
reactjs
deep shah
deep shah

Reputation: 89

Want to show/hide check box in react

I want to show hide checkbox when the value of checkbox is true
const showHide = (checked) => {
        if (checked.target.checked == true) {
          document.getElementById("hiddenField").style.visibility="visible";
        }
      }

here on checked.target.checked i have consoled it i am getting the value of checkbox as true or false

<Form.Item id="hiddenField" style={{ display: "none" }}>
            <Checkbox></Checkbox>
</Form.Item>

Upvotes: 0

Views: 3787

Answers (2)

TalOrlanczyk
TalOrlanczyk

Reputation: 1213

to hide an element you can use the following code:

{
   isChecked && (
      <h1>if true its render </h1>
    )
}

of course, as @Damien Monni said you need to store the state in useState

Upvotes: 1

Damien Monni
Damien Monni

Reputation: 1548

You need to use a state:

const [checked, setChecked] = useState(false);

const handleChange = (event) => {
  setChecked(event.currentTarget.checked);
}

return <Checkbox checked={checked} onChange={handleChange} />

Upvotes: 1

Related Questions