Q:

Onclick function not working for glyphycons in reactjs component

I have a react component for table, the table heads are sortable. I notice the texts in that th are working well for onclick method but the glyphicons are not working for onclick method although both are in same anchor. The code is as follows:
columns.push(
  <th key={index} data-nw-id={column.id} className={className.join(' ')}>
    {column.canSort
        ?
            <a href="#" className="u-textLink" onClick={e => {
                e.preventDefault();
                if (e.target.className == 'u-textLink' && allowSort) {
                    this.sortByColumn(e, column);
                };
            }}>
                {content} {this.props.sort == column.id
                    ? <span className={'icon-chevron-' + (this.props.order == 'asc' ? 'up' : 'down')}></span>
                    : null
                }
            </a>
        : content
    }

  </th>
);

A:

You can use the onClick method also in the following tag. For e.g:
{content} {this.props.sort == column.id
            ? <span onClick={e => this.sortByColumn(e, column)} className={'icon-chevron-' + (this.props.order == 'asc' ? 'up' : 'down')}></span>
            : null                                
          }

