const [visible, setVisibility] = useState(false)
    function clicked() {
        console.log('in cliked')
        const check = document.getElementById('acknowledged')
        check.addEventListener('click', showContinueButton())
        setVisibility(true)
    }
    function showContinueButton() {
        
        const continueButton = document.getElementById('continue')
        console.log(continueButton.getAttribute("visibility"))
        if(visible) {
            console.log('in the visible for loop')
            continueButton.setAttribute('visibility', 'visible')
        }
        
    }

const [visible, setVisibility] = useState(false);
let clicked = e => {
  setVisibility(e.target.checked);
}
return ( 
  <div>
       <input type = "checkbox" onClick = {clicked}/> 
     {
      visible &&
      <button> Button1 </button>
     } 
  </div>
)

const [visible, setVisible] = useState(false);
return (
    <div>
        <input type="checkbox" onClick={() => setVisible(!visible)}/>
        <br />
        { visible && <button>visible button</button> } 
    </div>
)

document.getElementById();
getAttribute();
setAttribute();

import { useState } from "react";
export default function App() {
  // 1. the variable 'visible' has initial value equal to false
  const [visible, setVisible] = useState(false);
  /*
  3. The click handle button updates the state (variable value of visible) to opposite of whatever it is,
  if true , then false, if false, then true
   */
  function onClickHandle() {
    setVisible((visible) => !visible);
  }
  /*
  5. LOGIC
  This function is returned everytime the state of the application changes, meaning everytime a user clicks on the checkbox, the state of var visible changes, and hence the component rerenders.
  */
  return (
    <div className="App">
      <label>
        Checkbox
        {/* 2. The input checkbox has a onClick Handler function passed as reference, meaning that function will be called when the checkbox is clicked. */}
        <input type="checkbox" onClick={onClickHandle} />
      </label>
      {/* 4. Application - An example of how to handle the logic, I have used terinary operator but basically it is saying if the value of visible if visible, return 'checked', else return 'not checked' */}
      <h2>Check box is {visible ? "checked" : "not checked"}</h2>
    </div>
  );
}

const [visible, setVisibility] = useState(false)
<button 
  style={{visibility:visible?'visible':'hidden'}}
>
  continue
</button>
<input
  type='checkbox' 
  onClick = {()=>{setVisibility(previousVisibility => !previousVisibility)} 
/>