Q:

React onClick not firing inside map generated list

I have a simple list being displayed on the return value of a fetch call. I have some functions firing on selection of an item, but for the life of me, I can't fire the onClick event. I have events bound outside the map that work just fine (the onKeyUp and down), but the onClick while inside the map does not work. Not sure where to go from there.
handleClick() {
// won't fire
        console.log('test')
    }

render() { 
        return (
            <div className="autocomplete">
                <input type="text" placeholder={this.props.fieldName} onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp} onClick={this.handleClick} />
                <div className="autocomplete__list" onClick={this.handleClick}>
                    <ul>
                        {this.state.list.map((item, index) => <li key={index} className={this.checkActive(index)} onClick={this.handleClick}>{item.firstName}</li>)}
                    </ul>
                </div>
            </div>
        )
    }

No errors thrown, the method does nothing when clicking those fields. If it matters at all, the "list" is absolutely positioned. And here is the constructor
constructor(props) {
        super(props)
        this.state = {
            name: '',
            list: [],
            cursor: 0
        }
        this.handleKeyDown = this.handleKeyDown.bind(this)
        this.handleKeyUp = this.handleKeyUp.bind(this)
        this.checkActive = this.checkActive.bind(this)
        this.handleClick = this.handleClick.bind(this)
    }

A:

The issue seems to be either: 

You have the same handler on a parent element that wraps all of your li's.. Usually the click event would bubble upwards from the children to the parent so this is unlikely.
Your li's are a lower z-index than the parent element. Which means that the li elements lay under an element. so a click event only happens on the element on the top.

Try adding this to your css
.autocomplete__list li {
    z-index: 100;
}

