I'm trying to render an Array of HTML Objects in a react return statement.

var domObj = LCARS.create(nemesisUI).dom;

return domObj.map(({ id, className }) => {
    <div id={id} className={className}></div>;
});

The LCARS.create() method returns an array of the previously defined objects that looks similar to this: pastebin (the .dom element is at the bottom)

The .dom elements are created in an element-specific create method like

create: function (oDef) {
var element;
if (oDef.href !== undefined) {
  element = $('<a id="' + oDef.data.id + '" class="wrapper"></a>');
} else {
  element = $('<div id="' + oDef.data.id + '" class="wrapper"></div>');
}
return element;
}

This needs to be done because later, classes will be added or removed:

class: function (object, oValue) {
  for (var prop in oValue) {
    var bValue = oValue[prop];
    if (bValue === false) {
      object.dom.removeClass(prop);
      delete object.data.class[prop];
    } else if (bValue === true) {
      if (!object.data.class) {
        object.data.class = {};
      }
      object.dom.addClass(prop);
      object.data.class[prop] = true;
    }
  }

  return true;
}

The whole code for the "LCARS SDK" can be found here: GitHub

So at least the domObj.dom is an array of jQuery.fn.init(). When I try to render it with the code above, .dom is "0" and id and className is undefined.

I also tried returning domObj[0] or domObj directly, but then I get the error:

Error: Objects are not valid as a React child (found: [object HTMLDivElement]). If you meant to render a collection of children, use an array instead.

I really don't know how I can render these Objects respective the jQuery.Init things. I hope anybody can help.