Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why is button on sidebar is unclickable?

Button on sidebar isn’t unclickable. On my main page, button element works clearly but on sidebar, it is not working.

import { useContext, TouchableOpacity } from "react";
import { DataContext } from "../App";
import "./SideBar.css";

    const SideBar = () => {
      const [showModal, setShowModal] = useContext(DataContext);
      return (
        <div
          className={showModal ? "modal-dialog show" : "modal-dialog"}
          role="document"
        >
          <div className="sideBar">
            <div className="sideBarHeader">
              <h5>Add City</h5>
              <button >
                Trial
              </button>
            </div>
          </div>
        </div>
      );
    };
    export default SideBar;
Tags:

3

Answers


  1. 0

    you havent given onclick function in buttton

    Login or Signup to reply.
  2. 0

    You must provide a click event to your button

    Login or Signup to reply.
  3. 0

    Please add a click handler on button onCLick here is your updated code:

    import { useContext } from "react";
import { DataContext } from "../App";
import "./SideBar.css";

const SideBar = () => {
  const [showModal, setShowModal] = useContext(DataContext);

  const handleClick = () => {
    // Handle button click logic here
    console.log("Button clicked!");
  };

  return (
    <div
      className={showModal ? "modal-dialog show" : "modal-dialog"}
      role="document"
    >
      <div className="sideBar">
        <div className="sideBarHeader">
          <h5>Add City</h5>
          {/* Ensure button has onClick event handler */}
          <button onClick={handleClick}>
            Trial
          </button>
        </div>
      </div>
    </div>
  );
};

export default SideBar;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search