import { useState } from "react";
function useToggle(initialVal = false) {
const [state, setState] = useState(initialVal);
const toggle = () => {
setState(!state);
};
return [state, toggle];
}
export default useToggle;
import React, { useState } from "react";
import useToggle from "./hooks/useToggle";
const Toggler = () => {
const [isHappy, toggleIsHappy] = useToggle(true);
const [isHeartbroken, toggleIsHeartbroken] = useToggle(false);
return (
<div>
<h1 onClick={toggleIsHappy}>{isHappy ? "😀" : "🤥"}</h1>
<h1 onClick={toggleIsHeartbroken}>{isHeartbroken ? "💔" : "❤️"}</h1>
</div>
);
};
export default Toggler;
import { useState } from "react";
export default initialVal => {
const [value, setValue] = useState(initialVal);
const handleChange = e => {
setValue(e.target.value);
};
const reset = () => {
setValue("");
};
return [value, handleChange, reset];
};