Question 73230 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Button not clicked in React – Reactjs

I am a new learner and have only been developing for about 4 months now on react. I was building a simple portfolio for myself and came in to a error.
I have created a toggler and a button and kept them in navbar. But it is not being clicked no matter how hard i try.
I have attached some coes for the button and the toggler.
Note: The toggler is a dark and light theme switcher and the button is just a regular button that downloads resume(i havenot uploaded the files yet.)

The code is below

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">
          <nav className="p-8 mb-12 flex justify-between  sm:text-left">
            <h1 className="text-xl space-x-5 dark:text-white">
              Developed by, <span className=" text-teal-500">__RSD</span>
            </h1>
            <ul className="flex items-center dark:text-white space-x-5">
              <label className="inline-flex relative items-center mr-5 cursor-pointer">
                <input
                  type="checkbox"
                  checked={mode === "dark"}
                  className="sr-only peer"
                  onChange={handleCheck}
                />
                <div
                  onClick={toggleDarkMode}
                  className="w-11 h-6 bg-gray-200 rounded-full peer  peer-focus:ring-green-300  peer-checked:after:translate-x-full
                   peer-checked:after:border-white after:content-[''] after:absolute
                    after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border 
                   after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-gray-600"
                ></div>
                <span className="ml-2 text-sm font-medium dark:text-white text-black">
                  Dark
                </span>
              </label>

              <li>
                <button>
                  <a
                    href="/assets/RajuSharma.pdf"
                    download
                    className=" bg-teal-500 hover:bg-teal-700 text-white hover:text-white font-bold py-2 px-4 rounded"
                  >
                    Resume
                  </a>
                </button>
              </li>
            </ul>
          </nav>
          <div className="p-5 text-center text-black dark:text-white">
            <motion.h2
              className="font-mono font-bold mt-52 text-5xl tracking-widest "
              initial={{ x: "100%" }}
              animate={{ x: "0%" }}
              transition={{ duration: 1 }}
            >
              RAJU SHARMA DAHAL
            </motion.h2>
            <motion.h3
              className="font-mono font-semibold text-3xl tracking-widest"
              initial={{ x: "-100%" }}
              animate={{ x: "0%" }}
              transition={{ duration: 1.5 }}
            >
              <span className=" text-teal-500">WEB</span> DEVELOPER
            </motion.h3>
            <div className="flex justify-center">
              <p className="font-serif pt-4 text-black text-center leading-3f w-2/4 dark:text-white">
                As a front-end developer, I am passionate about creating
                visually appealing and user-friendly websites. I have experience
                in HTML, CSS, and JavaScript and I enjoy using these skills to
                bring designs to life.
              </p>
            </div>
          </div>
          <div className="text-center text-3xl font-bold"></div>
          <div className="flex text-xl tracking-wide justify-center gap-6 pt-5">
            <a
              className="text-black dark:text-white"
              href="https://github.com/razzuSharma"
            >
              <BsGithub />
            </a>
            <a
              className="text-black dark:text-white"
              href="https://www.linkedin.com/in/raju-sharma-6a30671b0/"
            >
              <BsLinkedin />
            </a>
            <a
              className="text-black dark:text-white"
              href="https://www.facebook.com/ribekon/"
            >
              <BsFacebook />
            </a>
          </div>
        </section>
        <section className="h-screen w-screen  bg-orange-50  dark:bg-gray-900">
          <ScrollPage>
            <Skills />
            <section className=" dark:bg-gray-900">
              <Projects />
            </section>
          </ScrollPage>
        </section>
        <section className="bg-orange-50  dark:bg-gray-900">
          <Contact />
        </section>
      </ScrollContainer>
      <ToastContainer />
    </div>
  );
}
export default App;

I was expecting to toggle the button or atleast the button to be clicked or change the cursor on hover.

Tags:

3

Answers


  1. 0

    Based on the code you provided, it seems that the button is missing an onClick handler, which is why it is not doing anything when clicked.

    Also, it is not recommended to nest interactive elements, so if you want a link that looks like a button, you should remove the outer button element and simply style the a element like a button (which you already seem to be doing)

    The cursor can be controlled by adding the cursor-pointer tailwind utility to your classes

    Your dark mode toggle will not work since the toggleDarkMode method captures the value of mode at first render and doesn’t update. You can use useCallback to make sure the method updates:

    const toggleDarkMode = useCallback(() => {
  setMode(mode === "light" ? "dark" : "light");
}, [mode]);
    Login or Signup to reply.
  2. 0

    I believe you are using tailwindcss to style the dark mode, make sure you include this in your tailwind.config.js:

    module.exports = {
  darkMode: 'class',
  // ...
}

    Refer to this page.

    Login or Signup to reply.
  3. 0

    Sorry, Your code is hard to follow especially if you don’t provide a portion of the navbar.

    I’ll try to try answer your problem based on my guts:

    What I noticed is your click event is created on a div but your
    label is outside of it.

    Maybe when you click on something, but you’re not actually clicking the triggering event of the click. Could you try, putting your label inside of the click event?

    Another thing to note:

    • You’re creating a 2 states in your app for handling the theme:
      checked and mode. This cause a bad performance in your app since
      your component will render twice because of this. You can just use
      single state to mark your app either dark or light
    • Since you’re creating a portfolio and it’s public facing website, it’s also important to follow Semantic HTML. In reality, only clickable elements are button and href, we should use them in all cases as it’s important for accessibility. Though, you can use elements to bind an even but I would suggest to still follow the semantic HTML.
    • You’re breaking your unordered list because you created a label inside of it without wrapping them in li.

    Please let me know if it solves your problem I pointed above. Thank you

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search