Tengo un botón AGREGAR que me permite agregar algunos objetos a la opción que seleccioné en el menú desplegable. Y también tengo una función adjunta a ese botón Agregar.

 onAddClicked = () =>{ this.setState({ showOptions: true }); } <button type="button" onClick={this.onAddClick} style={{ float: "right", marginLeft: "10px", marginRight: "10px" }} id="AddSelectedTag" className={((this.state.selectedOptions ?this.state.selectedOptions.length === 0 : true) ? "re-btn-primary-inactive" : "re-btn-primary-blue")}disabled={(this.state.selectedOptions ? this.state.selectedOptions.length === 0 : true) ? true : false}>Add </button>

Puedo seleccionar una opción y algunos objetos debajo de ella. Ahora necesito mostrar un mensaje de error cuando quiero cambiar mi opción después de seleccionar algunos objetos debajo de eso. Tengo un estado para mis opciones seleccionadas como "this.state.selectedOptions". estoy intentando

 if(this.state.selectedOptions ? this.state.selectedOptions.value : null) { alert("selectedOptions value has changed"); }

Pero esto devuelve un mensaje de alerta cada vez que hago clic en el botón Agregar, no cuando trato de cambiar el estado.

 onViewAllTagClick = (event) => { this.setState({ showTagsSysController: true, selectedOptions: event, }); } <li id="viewAllTags" className="re-exp-pak-edit-system-li"> <div className="re-lbl-normal-12"> <Select id="selectTags" styles={ddlUtils.getSnapDdlStyle(200)} placeholder="Select Tag, Network or Hardware " options={[{label:"Tag",value:2,isChild:0}, {label:"Network",value:5,isChild:0}, label:"Hardware",value:3,isChild:0}, ]} value = { this.state.selectedOptions} isSearchable={false} isDisabled={this.state.isEdit === true} noOptionsMessage={() => null} onChange = {this.state.selectedSystems !== null ? this.onViewAllTagClick : null}> </Select>