skip to Main Content

new to JS here and working on a react project, I want to essentially have the button’s visibility attribute which is set to false to change to true when a checkbox is checked, here is my code and I believe the logic is there but for some reason is not reflected on the UI, any advice is appreciated

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

the code above is the code I have defined before the return JSX, then within the JSX I call this code as followed…

<input type='checkbox' id='acknowledged' onClick={clicked}></input>

So essentially when this checkbox is clicked, using the onClick attribute, I pass the click function I passed earlier which has an eventListener with a callback function to change the visibility of the button

2

Answers


  1. I want to point out that there are a lot of classical JavaScript logic in your functions, which should be used via hooks, and not directly.

    Hence these vanilla functions have better alternatives in React.

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

    The right way to resolve your issue should instead be as follows:

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

    Working example here

    Login or Signup to reply.
  2. With the use of a state, you don’t need to manipulate the CSS.

    Here is an example for your reference:

    const [visible, setVisibility] = useState(false);
    let clicked = e => {
      setVisibility(e.target.checked);
    }
    return ( 
      <div>
         &nbsp; <input type = "checkbox" onClick = {clicked}/> 
         {
          visible &&
          <button> Button1 </button>
         } 
      </div>
    )
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search