React - onClick function not working inside a flexbox

Question

When I click the search button in the flexbox, I expect the console will log I am clicked, but it does not appear which is unexpected.

App.js

                <div
                  className={classes.searchIcon}
                  onClick={() => {
                    console.log("I am clicked");
                  }}
                >
                  <SearchIcon />
                </div>

CodeSandbox:

Answer 1

You have pointerEvents: none in your CSS, which is disabling clicking. Also, I'd recommend using a button instead of a div for accessibility purposes (you can style it to look however you want).

const useStyles = makeStyles((theme) => ({
  searchIcon: {
    padding: theme.spacing(0, 1),
    height: "100%",
    //pointerEvents: "none", <-- remove this
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    cursor: "pointer",
    zIndex: 200
  }
}));

The more accessible JSX (with a button):

<button
  className={classes.searchIcon}
  onClick={() => {
    console.log("I am clicked");
  }}
>
  <SearchIcon />
</button>