score:1

Accepted answer

if you don't want to use arrow for some reason. you can use currying way instead:

function toggleswitch() {
  const [values, setvalues] = react.usestate({
    astma: "off",
    
  });

  const toggle = (namein, valuein) => e => {
    console.log("toggle", namein, valuein)
    const {name, value} = (namein, valuein);
    if (value === "off") {
      setvalues({
        ...values,
        [name]: "on",
      });
    } else if (value === "on") {
      setvalues({
        ...values,
        [name]: "off",
      });
    }
  }
  
  //return just the function and make the html in the page and on klick use the toggle function
  //remember to export values as well.
  return (
    <div
      classname={`switch ${values.astma}`}
      onclick={toggle("astma", values.astma)}
      id={"astma"}
      name={"astma"}
    >currying is cool. click me!</div>
  );
}

reactdom.render(<toggleswitch />, document.getelementbyid("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>


Related Query

More Query from same tag