Create Element with id or class with React Dom

Question

I am creating an element like so

const foo = document.createElement('div');
ReactDOM.render(component, foo);

I wonder if it is possible to create foo with an class or id?

Answer 1

I would suggest you create it in a proper React way:

const App = () => {
  return React.createElement(
    "div",
    {style:{color:"red"}, id: 'someId', className: "someClass"},
    "Here I am",
  );
};

ReactDOM.render(React.createElement(App), document.getElementById("root"));

Answer 2

The id and/or class of foo can be specified via the setAttribute(..) and classList.add(..) methods as shown:

const foo = document.createElement('div');

/* Set id of "some-id" on foo */
foo.setAttribute("id", "some-id");

/* Add class of "some-class" to foo */
foo.classList.add("some-class");