Button not working as expected on click in react

Question

import React from 'react'

const Support = () => {
  
  return (
    <div>
      <button onClick={()=>console.log('support')}>add</button>
    </div>
  )
}

this is the simple button , which is not logging on onclick .

i tried , adding button in various component and tried clicking , its not working .

Answer 1

After debugging your code, I have found out issue on CSS side, Here, is the solution for the same.

remove fixed keyword from this div in Home.js component to make it work...

=> Replace this....

<div className="fixed inset-y-0 z-50 h-full w-64 flex-col">
  <SideBar />
</div>;

=> To this....

<div className="inset-y-0 z-50 h-full w-64 flex-col">
  <SideBar />
</div>;

After this changes, Your Home.js component will look like this:

import { useState } from "react";
// import Login from "./components/Login";
import SideBar from "./SideBar";
import { Outlet, useNavigate } from "react-router-dom";

import { history } from "../utils/helper";
import Login from "./Login";

function Home() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  history.navigation = useNavigate();

  return !isLoggedIn ? (
    <Login setIsLoggedIn={setIsLoggedIn} />
  ) : (
    <div className="flex">
      <div className="inset-y-0 z-50 h-full w-64 flex-col">
        <SideBar />
      </div>
      <div className="relative ml-40 p-2">
        <Outlet />
      </div>
    </div>
  );
}

export default Home;

I don't know what's the main cause behind this, But this fixed keyword is not allowing us to clicking on button, You can check into this in more detailed way according to your CSS styling.

Let me know, If you've any questions.