React onClick not firing on child HTML(JSX) elements

Question

Background

I am trying to add sorting capabilities to a table I created (Styled with bootstrap 4). I am using React as my framework. I know these solutions exists in awesome packages like React-Bootstrap-Tables but these are a bit overkill for what I want to achieve and I also like learning how to do this myself.

The Plan

I know the logic I will write to achieve the sorting.

The Problem

The problem I am having is that I can't find out which header column the user has clicked on, so I am unable to inform my functions what to sort by.

When I add onClick={} to a header column, the parent element seems to be blocking the listener. If I add the onClick={} to the header element, I end up getting an event but doesn't go granular enough to tell me what I clicked on.

In the video I watched, the recorder used a button html element. When I used this I still couldn't get the onClick={} to fire.

QUESTION:

How do I get my onClick={} to work on a child html(jsx) element so that the parent is not blocking the listener?

The Table

<table className="table animated fadeIn ">
                <thead>
                  <tr className="d-flex header-row">
                    <th className="col-4" id="lname">
                      <button onClick={sortTableBy}>Last Name </button>
                    </th>
                    <th className="col-4" id="fname" onClick={sortTableBy}>
                      First Name
                    </th>
                    {this.props.selectedHomework ? (
                      <th className="col-4 animated fadeIn text-center">
                        Homework Checker
                      </th>
                    ) : (
                      <th className="col-4" />
                    )}
                  </tr>
                </thead>
                <tbody>{students}</tbody>
              </table>

Function

const sortTableBy = event => {
  console.log("you tried to sort ", event.currentTarget);
};

When I to console log the event, nothing happens as the onClick to will not get registered as the parent element seems to block the listen.

If I put this on the THEAD element, then I get

Answer 1

Ok, this was my mistake. I been working on this code for some time now. A while back I wanted to ensure the Header Row would not be hoverable so I added a class that pointer-events: none . This is why nothing would register *sigh.