const [admin, setadmin] = useState(false);
  const toggleIsLoading = () => {
    admin?setadmin(false):setadmin(true)
  };
 
  return (
    <div className="signup">
      <div className="register_head">
        <h1>REGISTER YOURSELF</h1>
      </div>
      <div className="form">
        <div>
          <label for="options">I'm: </label>
          <select className="options">
            <option id="emp" value={admin}>
              Employee
            </option>
            <option onClick={toggleIsLoading}>Admin</option>
          </select>
        </div>

I want to change admin value to true but it is not working.

I tied several things but state is not changing.

CodePudding user response：

In your code you are trying to fire onClick eventListener on <option></option> tag, but neither onclick nor onselect eventListener are supported on the <option></option> tag.

In order to fire the toggleIsLoading function you need to fire a function on onChange() eventListener from the <select></select> tag.

JS

  const [admin, setadmin] = useState(false);
  const toggleIsLoading = () => {
    console.log("TRIGGERED");
    admin ? setadmin(false) : setadmin(true);
  };

HTML

 <div className="signup"></div>
      <div className="register_head">
        <h1>REGISTER YOURSELF</h1>
      </div>
      <div className="form">
        <div>
          <label htmlFor="options">I'm: </label>
          <select className="options" onChange={toggleIsLoading}>
            <option id="emp" value={admin}>
              Employee
            </option>
            <option>Admin</option>
          </select>
        </div>
      </div>

CodePudding user response：

const toggleIsLoading = () => {
  setAdmin(!admin)
}

CodePudding user response：

Use onChange inside your select tag and handle the value accordingly. Here is a simple example

  const toggleIsLoading = (event) => {
    setadmin(event.target.options.selectedIndex === 1)
    // or  e.g.--> setadmin(!admin)
  };


  <select onChange={toggleIsLoading} className="options">
    <option id="emp" value={admin}>
      Employee
    </option>
    <option>Admin</option>
  </select>

demo