Prevent clicking twice before running indented if block

So I want to check if my class contains a certain class name before running my indented if statment, my problem is that I'm required to press my button twice before it runs my indented if and else statements while I just want to press it once.

my code :

    filter(e) {

        if(e.target.classList.contains(productive)){
            if (document.getElementById(productive).style.display ==="block") {
                document.getElementById(productive).style.display = "none"
                e.target.classList.add('selected');

            }
            else {
                document.getElementById(productive).style.display = "block"
                e.target.classList.remove('selected');
        }}

    }

this is how I have attached my onclick

<div id="filter_"><a className={""+main_class} style={pillStyle} onClick={this.filter}>{this.props.filter}</a></div>