Question 239070 in CSS Question posted in
Some basic documentation can be found here.

Css – Button is not clickable (react component)

Created a component which has signin and signup button on the right side and the Sign up button here is not clickable.
Here is the code of the component =>

import React from "react";

export default function Abar() {

    const handleClick = () => {
        console.log("Eee");
    };

    const styles = {
        body: {
            margin: 0,
            fontFamily: "Arial, sans-serif"
        },
        flexContainer: {
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            padding: "10px 20px",
            backgroundColor: "black",
            color: "white"
        },
        skillSphereTitle: {
            fontSize: "24px"
        },
        buttonContainer: {
            display: "flex",
            gap: "10px"
        },
        button: {
            color: "white",
            border: "1px solid transparent",
            borderTop: "4px solid #0169AD",
            backgroundColor: "black",
            cursor: "pointer",
            padding: "10px 20px"
        }
    };

    return (
        <div style={styles.flexContainer}>
            <div>
                <h6 style={styles.skillSphereTitle}>
                    Skill Sphere
                </h6>
            </div>
            <div style={styles.buttonContainer}>
                <button
                    type="button"
                    style={styles.button}
                    onClick={() => console.log("Rohan")}
                >
                    Sign Up
                </button>
                <button
                    type="button"
                    style={styles.button}
                    onClick={() => console.log("Rohan")}
                >
                    Sign In
                </button>
            </div>
        </div>
    );
}

Tried every thing From the internet and it dd the solve the issue

Tags:

2

Answers


  1. 0

    You’re code is correct. Maybe you’re printing the same text on both button and that’s why can’t figure out it’s working.

    Try printing different messages on buttons.

    <button
  type="button"
  style={styles.button}
  onClick={() => console.log("Sign up clicked")}
>
  Sign Up
</button>
    Login or Signup to reply.
  2. 0

    Your code works fine, you can run in here on StackOverflow:

    function Abar() {

    const handleClick = () => {
        console.log("Eee");
    };

    const styles = {
        body: {
            margin: 0,
            fontFamily: "Arial, sans-serif"
        },
        flexContainer: {
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            padding: "10px 20px",
            backgroundColor: "black",
            color: "white"
        },
        skillSphereTitle: {
            fontSize: "24px"
        },
        buttonContainer: {
            display: "flex",
            gap: "10px"
        },
        button: {
            color: "white",
            border: "1px solid transparent",
            borderTop: "4px solid #0169AD",
            backgroundColor: "black",
            cursor: "pointer",
            padding: "10px 20px"
        }
    };

    return (
        <div style={styles.flexContainer}>
            <div>
                <h6 style={styles.skillSphereTitle}>
                    Skill Sphere
                </h6>
            </div>
            <div style={styles.buttonContainer}>
                <button
                    type="button"
                    style={styles.button}
                    onClick={() => console.log("Rohan(Up)")}
                >
                    Sign Up
                </button>
                <button
                    type="button"
                    style={styles.button}
                    onClick={() => console.log("Rohan(In)")}
                >
                    Sign In
                </button>
            </div>
        </div>
    );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Abar/>);
    <script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js"></script>
<div id="root">Loading...</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search