How to use the react.createElement function in react

(function (param) {
                                  var result = param[/* result */0];
                                  if (typeof result === "number") {
                                    return React.createElement("div", undefined, "Loading");
                                  } else if (result.tag) {
                                    var response = result[0];
                                    var isPlaying = Belt_Option.getWithDefault(Belt_Option.flatMap(Belt_Option.flatMap(response.spotify.me, (function (me) {
                                                    return me.player;
                                                  })), (function (player) {
                                                return player.isPlaying;
                                              })), false);
                                    var durationMs = Belt_Option.getWithDefault(Belt_Option.flatMap(Belt_Option.flatMap(Belt_Option.flatMap(response.spotify.me, (function (me) {
                                                        return me.player;
                                                      })), (function (player) {
                                                    return player.item;
                                                  })), (function (item) {
                                                return item.durationMs;
                                              })), 0);
                                    var progressMs = Belt_Option.getWithDefault(Belt_Option.flatMap(Belt_Option.flatMap(response.spotify.me, (function (me) {
                                                    return me.player;

Paginate.prototype.render = function () {
        var _this = this;
        this.props.debug_info && console.log("Render:", this.props.debug_info());
        return React.createElement("div", { className: "monadic-paginated-content" },
            this.state.get_page_cache != "loading" ? this.state.get_page_cache : null,
            this.state.current_page != "loading" && this.state.current_page.num_pages > 1 ?
                React.createElement("div", { className: "monadic-paginator" },
                    this.state.current_page.page_index > 0 && this.state.current_page.num_pages > 3 ?
                        React.createElement("a", { className: "page first-page", style: { margin: "5px" }, onClick: function () { return _this.goto(0); } }, 1) : null,
                    this.state.current_page.page_index > 2 ? "..." : null,
                    this.state.current_page.page_index > 0 ?
                        React.createElement("a", { className: "page prev-page", style: { margin: "5px" }, onClick: function () { return _this.goto(_this.state.current_page != "loading" && _this.state.current_page.page_index - 1); } }, '<') : null,
                    React.createElement("span", { className: "page current-page", style: { margin: "5px" } }, this.state.current_page.page_index + 1),
                    this.state.current_page.page_index < this.state.current_page.num_pages - 1 ?
                        React.createElement("a", { className: "page next-page", style: { margin: "5px" }, onClick: function () { return _this.state.current_page != "loading" && _this.goto(_this.state.current_page.page_index + 1); } }, '>') : null,
                    this.state.current_page.page_index < this.state.current_page.num_pages - 2 ? "..." : null,
                    this.state.current_page.page_index < this.state.current_page.num_pages - 1 && this.state.current_page.num_pages > 3 ?
                        React.createElement("a", { className: "page last-page", style: { margin: "5px" }, onClick: function () { return _this.state.current_page != "loading" && _this.goto(_this.state.current_page.num_pages - 1); } }, this.state.current_page.num_pages) : null)
                :
                    null,

var ManyOptions = function ManyOptions() {
  var _React$useState = React.useState([]),
      selected = _React$useState[0],
      setSelected = _React$useState[1];

  var _React$useState2 = React.useState(dummyOptions),
      options = _React$useState2[0],
      setOptions = _React$useState2[1];

  return React.createElement(Grommet, {
    full: true,
    theme: grommet
  }, React.createElement(Box, {
    fill: true,
    align: "center",
    justify: "start",
    pad: "large"
  }, React.createElement(Select, {
    multiple: true,
    closeOnChange: false,
    placeholder: "select an option...",
    selected: selected,
    options: options,
    dropHeight: "medium",
    onClose: function onClose() {
      return setOptions(options.sort(function (p1, p2) {

type: "fullscreen-exit"
  })), !fullscreen && React.createElement("button", {
    type: "button",
    onClick: requestFullscreen
  }, React.createElement(Icon, {
    type: "fullscreen"
  })))), x5playsinline && !x5videofullscreen && src && !loading && !waiting && !seeking && !ended && !kernelMsg && React.createElement("button", {
    className: styles$1.blocked,
    onClick: onPlayClick
  }, React.createElement(Icon, {
    type: "play-circle"
  })), loading && !kernelMsg && React.createElement("div", {
    className: styles$1.loading
  }, React.createElement(Icon, {
    type: "loading"
  })), kernelMsg && React.createElement("div", {
    className: styles$1.kernelMsg
  }, kernelMsg.type, ": ", kernelMsg.detail));
});
ReactPlayerSkin.propTypes = {

var choiceValue = choice[0]
    var choiceLabel = choice[1]
    if (is.Array(choiceLabel)) {
      var attrsPlus = object.extend({}, this.attrs)
      if (id) {
        attrsPlus.id +='_' + i
      }
      if (key) {
        attrsPlus.key += '_' + i
      }
      var subRenderer = ChoiceFieldRenderer(this.name, this.value,
                                            attrsPlus,
                                            this.controlled,
                                            choiceLabel)
      subRenderer.choiceInputConstructor = this.choiceInputConstructor
      items.push(React.createElement('li', null, choiceValue, subRenderer.render()))
    }
    else {
      var w = this.choiceInputConstructor(this.name, this.value,
                                          object.extend({}, this.attrs),
                                          this.controlled,
                                          choice, i)
      items.push(React.createElement('li', null, w.render()))
    }
  }
  var listAttrs = {}
  if (id) {
    listAttrs.id = id
  }
  return React.createElement('ul', listAttrs, items)
}

{ style: { display: 'flex', justifyContent: 'center' } },
            React__default.createElement(
              'button',
              {
                id: 'vector-button',
                className: /*#__PURE__*/ /*#__PURE__*/ css(
                  'color:white;font-size:20px;padding:10px;border:none;border-radius:50px;transition:0.4s;cursor:pointer;background:linear-gradient( 90deg,rgba(131,58,180,1) 0%,rgba(253,29,29,1) 50%,rgba(252,176,69,1) 100% );&:focus{outline:none;}'
                ),
                onClick: props.updateVector
              },
              'Apply vector'
            )
          )
        )
      ),
      React__default.createElement(ReactTooltip, {
        place: 'right',
        effect: 'float'
      })
    )
  )
}

export const Link = ({ href, children, ...props }) =>
  React.createElement("a", { href: `#${href}`, ...props }, children);

key: 'resize-detector'
          });

        case 'childFunction':
          return cloneElement(children(childProps));

        case 'child':
          return cloneElement(children, childProps);

        case 'childArray':
          return children.map(function (el) {
            return !!el && cloneElement(el, childProps);
          });

        default:
          return createElement(nodeType);
      }
    });

h(this.CheckBox, {stateKey: 'alternateCoordinates', text: 'Alternate coordinates'}),
                h(this.CheckBox, {stateKey: 'showCorner', text: 'Show lower right corner only'}),
                h(this.CheckBox, {stateKey: 'showDimmedStones', text: 'Dim dead stones'}),
                h(this.CheckBox, {stateKey: 'fuzzyStonePlacement', text: 'Fuzzy stone placement'}),
                h(this.CheckBox, {stateKey: 'animateStonePlacement', text: 'Animate stone placement'}),
                h(this.CheckBox, {stateKey: 'showMarkerMap', text: 'Show markers'}),
                h(this.CheckBox, {stateKey: 'showGhostStones', text: 'Show ghost stones'}),
                h(this.CheckBox, {stateKey: 'showPaintMap', text: 'Show paint map'}),
                h(this.CheckBox, {stateKey: 'showHeatMap', text: 'Show heat map'}),
                h(this.CheckBox, {stateKey: 'showLines', text: 'Show lines'}),
                h(this.CheckBox, {stateKey: 'showSelection', text: 'Show selection'}),
                h(this.CheckBox, {stateKey: 'isBusy', text: 'Busy'})
            ),

            h('div', {},
                h(Goban, {
                    innerProps: {
                        onContextMenu: evt => evt.preventDefault()
                    },

                    vertexSize,
                    animate: true,
                    busy: this.state.isBusy,
                    rangeX: showCorner ? [8, 18] : undefined,
                    rangeY: showCorner ? [12, 18] : undefined,
                    coordX: alternateCoordinates ? i => chineseCoord[i] : undefined,
                    coordY: alternateCoordinates ? i => i + 1 : undefined,

                    signMap: this.state.board.signMap,
                    showCoordinates,
                    fuzzyStonePlacement,
                    animateStonePlacement,