How to render multiple HTML parts with a plain Javascript function

When you run your code, you'll see the error Uncaught ReferenceError: key is not defined in the console.

That's because key in if(id === key) is not defined. The line arrOfIds.map(key => key) returns the same exact array as arrOfIds because Array.prototype.map "returns a new array populated with the results of calling a provided function on every element in the calling array."

Here, you don't assign that new array to a variable, so nothing happens. Even if it was, that new array would be a copy of arrOfIds because your mapping function (key) => key returns key for every key -- meaning that the output is the same as the input.

However, that's not an issue here. If I understand your question correctly, then this demo should show an example of what you're trying to accomplish. If that's what you want to achieve, then here's a solution:

First, you don't need to iterate for component in objWithComponent inside idArr -- you're already doing that in the idArr. You don't need the ids array either, because you can get the keys of the components from the components object using Object.keys().

Let's say your HTML looks something like this:

<div>
  <div id="newsletterEs"></div>
  <div id="compartirEnFlex"></div>
  <div id="infoArticulo"></div>
  <div id="infoDeLaWebEnFlexIzq"></div>
</div>

Then, using Object.keys(components) to get an array of the ids of the components that you have, you can map those to HTML tags. In fact, map is not necessary here because map returns a new array, and unless you need that array later, there's no reason to use map. Instead, you can use Object.prototype.forEach.

Here's what that would look like:

const components = {
  compartirEnFlex: `<h4>Newsletter</h4>`,
  newsletterEs: `<h4>Compartir</h4>`,
}

function renderComponents(objWithComp) {
  Object
    .keys(components)
    .forEach((id) => {
      const element = document.getElementById(id)
      const component = objWithComp[id]
      if (component && element) {
        element.insertAdjacentHTML('afterbegin', component)
      }
    })
}

renderComponents(components)

Then, when you call renderComponents, you can pass just the components argument, and only render the components for which divs with corresponding ids exist with an if statement.