title: Using ReactJS createElement to output HTML without JSX
body: <p>I am trying to create this code in <strong>ReactJS</strong> without <strong>JSX</strong></p>
  
  <pre><code>&lt;li&gt;
    &lt;a href="javascript:;" onClick={onClick ? this.handleClick : null}&gt;
      &lt;div className="home-gallery" style={{background: `url(${photo})`}}/&gt;
    &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>_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
            }))
          ))
        )
    }}]);
  </code></pre>
  
  <p>Could someone point me in the direction of fixing this or reference how to best learn what I am doing wrong. </p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I have no figured out the majority of my query with altering to but the <code>background: 'url(${photo})'</code> is still not producing, whilst the margin is. </p>
  
  <pre><code>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 })
          )
        );
  </code></pre>