i am trying to hide a div when it is in mobile view i am using a ternory operator and i am getting error i cannot compltely hide the div becase it already has a ternory operator inside it how can i achive this

 {this.state.hidediv?
               (<div className="livechat">): (<div className="livechat2">)
                 } //error here 
                 {this.state.hidecaht ? (
                   <>
                     <a
                       href="#"
                       className="close"
                       onClick={() => this.hidechat(true)}
                     ></a>
                     <Livechat id={this.state.liveid} />
                   </>
                 ) : null}
               </div>

livechat2 has css display:none so it wont show up

img