reactjs snippet

react.js

<div className="EditableCollectionAddon-notes">
            <h4 className="EditableCollectionAddon-notes-header">
              <Icon name="comments-blue" />
              {i18n.gettext('Leave a note')}
            </h4>

            {this.state.editingNote ? (
              <React.Fragment>
                {errorHandler.renderErrorIfPresent()}
                <DismissibleTextForm
                  className="EditableCollectionAddon-notes-form"
                  microButtons
                  onDelete={addon.notes ? this.onDeleteNote : null}
                  onDismiss={this.onDismissNoteForm}
                  onSubmit={this.onSaveNote}
                  placeholder={i18n.gettext('Add a comment about this add-on.')}
                  submitButtonText={i18n.gettext('Save')}
                  text={addon.notes || null}
                />
              </React.Fragment>
            ) : (
              <div className="EditableCollectionAddon-notes-read-only">
                <span
                  className="EditableCollectionAddon-notes-content"
                  // eslint-disable-next-line react/no-danger
                  dangerouslySetInnerHTML={sanitizeHTML(
                    nl2br(addon.notes || ''),
                    ['br'],
                  )}
                />
                <div className="EditableCollectionAddon-notes-buttons">
                  <Button
                    buttonType="action"
                    className="EditableCollectionAddon-notes-edit-button"
                    micro
                    onClick={this.onEditNote}
                  >
                    {i18n.gettext('Edit')}
                  </Button>
                </div>
              </div>
            )}
          </div>