Web Totals

useToggle

const useToggle = (defaultValue) => {
  const [value, setValue] = useState(defaultValue);

  const toggleValue = (value) => {
    setValue((currentValue) => {
      return typeof value === 'boolean' ? value : !currentValue;
    });
  };

  return [value, toggleValue];
};

function ToggleComponent() {
  const [value, setToggle] = useToggle(false);

  return (
    <div>
      <div>Value: {`${value}`}</div>
      <div>
        <button onClick={setToggle}>Toggle</button>
      </div>

      <div>
        <button onClick={() => setToggle(true)}>Set True</button>
      </div>

      <div>
        <button onClick={() => setToggle(false)}>Set False</button>
      </div>
    </div>
  );
}

// Render App
render(<ToggleComponent />);
jsx