使用ReactJS createElement在不使用JSX的情况下输出HTML

Question

I am trying to create this code in ReactJS without JSX

<li>
  <a href="javascript:;" onClick={onClick ? this.handleClick : null}>
    <div className="home-gallery" style={{background: `url(${photo})`}}/>
  </a>
</li>

Reason is due to altering previous code in a component that doesn't quite fit my needs. Reading some other posts I came to this but its far from working.

_createClass(Photo, [{
 key: 'handleClick',
  value: function handleClick(event) {
   var _props = this.props,
      onClick = _props.onClick,
        index = _props.index,
        photo = _props.photo;

      onClick(event, { photo: photo, index: index });
  }
}, {
    key: 'render',
    value: function render() {
      var _props2 = this.props,
            photo = _props2.photo,
          onClick = _props2.onClick,
           margin = _props2.margin;

      var imgStyle = { background: `url(${photo})`, margin: margin };
      return 

      _react2.default.createElement('li', null,
        _react2.default.createElement('a', _extends({
          onClick: onClick ? this.handleClick : null
        },
          _react2.default.createElement('div', _extends({
            style: onClick ? _extends({}, imgStyle, imgWithClick) : imgStyle
          }))
        ))
      )
  }}]);

Could someone point me in the direction of fixing this or reference how to best learn what I am doing wrong.

UPDATE

I have no figured out the majority of my query with altering to but the background: 'url(${photo})' is still not producing, whilst the margin is.

var imgStyle = { background: `url(${photo})`, margin: margin };

      return _react2.default.createElement(
        "li",
        null,
        _react2.default.createElement(
          "a",
          { href: "javascript:;", onClick: onClick ? this.handleClick : null },
          _react2.default.createElement("div", { className: "home-gallery", style: onClick ? _extends({}, imgStyle) : imgStyle })
        )
      );

Answer 1

Okay, I came to the solution by using the online Babel compiler . Putting in the JSX gave an output that lead me toward the solution.

var imgStyle = { backgroundImage: 'url(' + photo.src + ')', margin: margin };
  console.log(photo)
  return _react2.default.createElement(
    "li",
    null,
    _react2.default.createElement(
      "a",
      { href: "javascript:;", onClick: onClick ? this.handleClick : null },
      _react2.default.createElement("div", { className: "home-gallery", style: onClick ? _extends({}, imgStyle) : imgStyle })
    )
  );