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

renderExperimentalMessage(browserName) {
    const underConstructionMessage =
      "Debugging is experimental and certain features won't work (i.e, seeing variables, attaching breakpoints)"; // eslint-disable-line max-len

    return dom.div(
      { className: "under-construction" },
      dom.div(
        { className: "under-construction-message" },
        dom.p({}, underConstructionMessage),
        dom.img({ src: "/pad-assets/under_construction.png" }),
        dom.a(
          {
            className: "github-link",
            target: "_blank",
            href: docsUrls.github
          },
          "Help us make it happen"
        )
      )
    );
  }

const progress = maybe.fromNullable(this.state.progress);

    const description = _.isEmpty(this.props.config) || _.isEmpty(this.props.config.description)
      ? 'Please drag & drop your image file here or click to browse the file system.'
      : this.props.config.description;

    return D.div({className: 'iiif-upload__holder'},
                 this.state.alertState ? createElement(Alert, this.state.alertState) : null,
                 progress.map(progress => ProgressBar({ active: true, min: 0, max: 100, now: progress })).getOrElse(null),
      createElement(Dropzone,
        {
          className: 'iiif-upload__dropzone',
          onDrop: this.onDrop.bind(this),
          multiple: false,
        },
        D.div({className: 'iiif-upload__description'}, D.p({}, description)),
        D.button({
          className: 'iiif-upload__dropzone-button btn btn-sm btn-default',
        }, 'Browse')
      ),
      this.state.files.map(file => D.h4({key: file.name}, 'Selected file: ' + file.name)),
      createElement(ResourceEditorForm,
        {
          fields: FORM_FIELDS,
          persistence: {
            persist: (intialModel, model) => {
              if (FieldValue.isEmpty(model)) { return; }
              return this.submit(model);
            },
          },
        } as ResourceEditorFormProps,
        React.createElement(

const dialogRef = 'confirm-graph-deleting';
      const onHide = () => getOverlaySystem().hide(dialogRef);
      const onSubmit = () => {
        onHide();
        this.deleteGraph();
      };
      getOverlaySystem().show(
        dialogRef,
        createElement(OverlayDialog, {
          show: true,
          title: 'Delete graph',
          bsSize: 'sm',
          onHide,
          children: D.div({style: {textAlign: 'center'}},
            D.p({}, `Are you sure that you want to delete the named graph "${this.props.graphuri}"?`),
            D.p({}, `Please note that for larger named graphs (> 1 million statements), the deletion may typically take a few seconds (or even minutes) to be finally processed by the database.`),
            ButtonToolbar({style: {display: 'inline-block'}},
              Button({bsStyle: 'success', onClick: onSubmit}, 'Yes'),
              Button({bsStyle: 'danger', onClick: onHide}, 'No')
            )
          ),
        })
      );
    } else if (this.props.action === 'GET') {
      const {repository} = this.context.semanticContext;
      const acceptHeader = SparqlUtil.getMimeType(this.props.fileEnding);
      const ending = this.props.fileEnding && endsWith(this.props.graphuri, this.props.fileEnding )
        ? ''
        : this.props.fileEnding;
      const fileName = startsWith(this.props.graphuri, 'file:///' )
        ? this.props.graphuri.replace('file:///', '') + ending
        : 'graph-export-' + moment().format('YYYY-MM-DDTHH-mm-ss') + '.' + ending;

if (this.props.action === 'DELETE') {
      const dialogRef = 'confirm-graph-deleting';
      const onHide = () => getOverlaySystem().hide(dialogRef);
      const onSubmit = () => {
        onHide();
        this.deleteGraph();
      };
      getOverlaySystem().show(
        dialogRef,
        createElement(OverlayDialog, {
          show: true,
          title: 'Delete graph',
          bsSize: 'sm',
          onHide,
          children: D.div({style: {textAlign: 'center'}},
            D.p({}, `Are you sure that you want to delete the named graph "${this.props.graphuri}"?`),
            D.p({}, `Please note that for larger named graphs (> 1 million statements), the deletion may typically take a few seconds (or even minutes) to be finally processed by the database.`),
            ButtonToolbar({style: {display: 'inline-block'}},
              Button({bsStyle: 'success', onClick: onSubmit}, 'Yes'),
              Button({bsStyle: 'danger', onClick: onHide}, 'No')
            )
          ),
        })
      );
    } else if (this.props.action === 'GET') {
      const {repository} = this.context.semanticContext;
      const acceptHeader = SparqlUtil.getMimeType(this.props.fileEnding);
      const ending = this.props.fileEnding && endsWith(this.props.graphuri, this.props.fileEnding )
        ? ''
        : this.props.fileEnding;
      const fileName = startsWith(this.props.graphuri, 'file:///' )
        ? this.props.graphuri.replace('file:///', '') + ending