After only four months of learning and developing in react, I decided to create a simple portfolio for myself. However, I encountered an issue with a toggler and a button that I included in the navbar - they simply won't respond when clicked no matter what I do. I have provided some code snippets for both the button and the toggler below. Note: The toggler serves as a switch between dark and light themes, while the button is meant to download my resume (the files are not uploaded yet).
Check out the code snippet:
function App() {
const style =
"block max-w-sm p-6 bg-white-50 border border-gray-300 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 w-50 sm:w-50";
const [mode, setMode] = useState("light");
const [checked, setChecked] = useState(false);
function handleCheck() {
setChecked(!checked);
}
const toggleDarkMode = () => {
setMode(mode === "light" ? "dark" : "light");
};
return (
<div className={mode === "dark" ? "dark" : ""}>
<ScrollContainer>
<section className="h-screen w-screen bg-orange-50 dark:bg-gray-900">
...
</section>
</ScrollContainer>
<ToastContainer />
</div>
);
}
export default App;
I thought I would be able to toggle the button or at least get it to change visually upon hover, but unfortunately, nothing seems to work.