How to use the react-dom-factories.div function in react-dom-factories

private createFocusedImageRepresentation() {
    // This is the large featured image
    // Set container div height to largest of all images,
    // so that thumbnails don't move about on image transitions
    let focused = this.state.focusedPreviewRep.get().imgURL;
    let style = {
      height: this.largestPreviewRepHeight + 'px',
    };

    return D.div(
      {
        title: 'Click to view full-size image',
        className: 'object-representations__image--focused',
        style: style,
        onClick: this.showModal.bind(this),
        onLoad: this.handleImageChanges,
      },
      createElement(TransitionGroup,
        {
          key: 'image-focused-transition-group',
        },
        createElement(CSSTransition,
          {
            key: focused,
            classNames: 'cross-fade',
            timeout: {

label: 'Label*',
        expanded: this.state.label.length > 0,
        expandOnMount: true,
        onExpand: () => addLabel(),
        element: [
          this.state.label.map((label, index) => this.renderLabel(label, index, langOptions)),
          Boolean(lang) ? D.a({onClick: () => addLabel()}, '+ Add label') : null,
        ],
      }),
      row({
        label: 'Identifier*',
        expanded: this.state.id.isJust,
        expandOnMount: true,
        onExpand: () => this.updateValues({id: empty}, Validation.validateIri),
        error: this.state.id.map(v => v.error).getOrElse(undefined),
        element: D.div({className: 'input-group'}, [
          input({
            className: block('iri-input').toString(),
            type: 'text',
            placeholder: 'Any IRI to be used as unique identifier for the field definition.',
            onChange: e => this.updateValues({id: getFormValue(e)}, Validation.validateIri),
            value: this.state.id.isJust ? this.state.id.get().value : undefined,
            disabled: this.isEditMode(),
          }),
          D.div({className: 'input-group-btn'}, (
            this.isEditMode() ? this.renderCopyToClipboardButton() : btn({
              title: 'Generate IRI',
              onClick: e => this.generateIRI(),
            }, D.i({className: 'fa fa-refresh'}))
          )),
        ]),
      }),

render() {
    const { config } = this.props;

    return dom.div(
      { className: "launchpad-tabs" },
      dom.h3({}, "Configurations"),
      this.renderConfig(config),
      config.features ?
      (
        dom.h3({}, "Features"),
        this.renderFeatures(config.features)
      ) : null
    );
  }
}

render() {
    const { expression } = this.props;
    const { input, packet } = expression;
    return dom.div(
      { className: "rep-row" },
      dom.div({ className: "rep-input" }, input),
      dom.div(
        { className: "reps" },
        this.renderRepInAllModes({
          object: packet.exception || packet.result
        })
      ),
      this.renderPacket(expression)
    );
  }
}

renderSettings() {
    const { config, setValue } = this.props;

    return dom.div(
      {},
      dom.header({}, dom.h1({}, sidePanelItems.Settings.name)),
      Settings({ config, setValue })
    );
  }

public render() {
    if (this.state.error) {
      return createElement(ErrorNotification, {errorMessage: this.state.error});
    } else {
      return D.div(
        {className: 'semantic-table-holder'},
        this.state.isLoading ? createElement(Spinner) :
          this.state.data && !SparqlUtil.isSelectResultEmpty(this.state.data) ?
          this.renderTable() : createElement(TemplateItem, {template: {source: this.props.noResultTemplate}})
      );
    }
  }

}).onError( error => {
      const dialogRef = `page-saving-error`;

      getOverlaySystem().show(
          dialogRef,
            createElement(
              OverlayDialog, {
                onHide: () => {
                  getOverlaySystem().hide(dialogRef);
                  this.setState({saving: false});
                },
                type: 'modal',
                title: 'Error while saving the page',
                show: true,
              }, D.div({}),[
                D.div({}, error),
                Button({
                  bsStyle: 'success',
                  className: 'pull-right',
                  onClick: () => {
                    getOverlaySystem().hide(dialogRef);
                    this.setState({saving: false});
                  }
                }, 'Ok')])
        );
    })
  }

renderLaunchOptions() {
    const { selectedPane } = this.state;
    const { name, isUnderConstruction } = sidePanelItems[selectedPane];
    let displayName;
    if (name === "Firefox") {
      displayName = "Firefox Nightly";
    }

    const isConnected =
      name === sidePanelItems.Firefox.name
        ? this.state.firefoxConnected
        : this.state.chromeConnected;
    const isNodeSelected = name === sidePanelItems.Node.name;

    if (isNodeSelected) {
      return dom.div(
        { className: "launch-action-container" },
        dom.h3({}, "Run a node script in the terminal with `--inspect`"),
        isUnderConstruction ? this.renderExperimentalMessage(name) : null
      );
    }

    const connectedStateText = isNodeSelected
      ? null
      : `Please open a tab in ${displayName || name}`;

    return isConnected
      ? connectedStateText
      : this.renderLaunchButton(name, isUnderConstruction);
  }

renderPropertiesButton() {
    const {rel} = this.getData();
    return D.div({
      className: classnames({
        'semantic-inline--rdfa-set': rel !== null,
        'semantic-inline--rdfa-unset': rel === null,
      }),
      style: {
        position: 'absolute',
        top: 0, right: 0, width: this.PropertiesButtonSize, height: this.PropertiesButtonSize,
        zIndex: 5, cursor: 'pointer',
      },
      onClickCapture: (e: MouseEvent) => {
        e.stopPropagation();
        this.showModal();
      },
    });
  }