Multiple If conditions in JSX

I'm facing with an "If" issue inside JSX render() in my code when one of my conditions have 2 different 'onClick' events. I have 2 'a' tags, which one of them will display button 'X' if the statement is true, and the other will display button 'Y' if not. Both of them have an 'onClick' event.

For example:

{isNew ? <a id="add_domain" className={cx({ "disabled": 
!isRowValid })} onClick={this.onAddRow}><i className="fa fa-lg fa-plus-circle"/></a> : <a id="delete_domain" className={cx({ "disabled": enabled || !isRowValid })} onClick={onRemoveDomain}><i className="fa fa-lg fa-times-circle"/></a>}

I also have this 'a' tag which I want to add in case that '!enabled',

<a id="remove_domain" className={cx({ "disabled": !enabled || !isRowValid })} onClick={this.openModal}><i className="fa fa-lg fa-times-circle"/></a>}

I've tried the following:

if (isNew) {
            domain_status = <a id="add_domain" className={cx({ "disabled": !isRowValid })} onClick={this.onAddRow}><i className="fa fa-lg fa-plus-circle"/></a>;
        } else {
            domain_status = enabled && !isRowValid ?
               <a id="delete_domain" className={cx({ "disabled": !enabled || !isRowValid })} onClick={this.openModal}><i className="fa fa-lg fa-times-circle"/></a> :
               <a id="delete_domain" className={cx({ "disabled": enabled || !isRowValid })} onClick={this.onRemoveDomain}><i className="fa fa-lg fa-times-circle"/></a>;
        }

and also tried to do this:

<div>
(()=> {
if (isNew) {
   return add_icon;
 } else if (!isNew && enabled) {
   return remove_icon;
 } else (!isNew && !enabled)
   return remove_icon_modal;
 })
}
</div>

I'm expecting to be able and use the if condition to be able and to create 2 option of 'onClick' event if one of the conditions is false.