Adding join() to a map() function

Question

I'm mapping over an array to display data in the browser using template literals.

With each rendered object, a comma shows up in the browser and also when I inspected the element. I did some reading and I think it is because I haven't joined the array, which I am trying to do but I am not understanding where to add it in the basic function I have.

Here is the code:

let synopsisRender = synopsisContent.map((item)=>{
    return`
    <div class="synopsis" key=${item.id}>
        <div class="synopsisHeader">
            <div class="cover">
                <img src="${item.poster}" alt="${item.altText}">
            </div>
            <div class="synopsisTitle">
                <h1>${item.title}</h1>
            </div>
        </div>
        <div class="synopsisText">
            <h2>${item.subTitle}</h2>
            <p>${item.synopsisText}</p>
        </div>
    </div>
    `
});

document.getElementById("synopsis").innerHTML = synopsisRender;

Answer 1

After mapping, but before assigning to innerHTML.

let synopsisRender = synopsisContent.map((item)=>{
    return`
    <div class="synopsis" key=${item.id}>
        <div class="synopsisHeader">
            <div class="cover">
                <img src="${item.poster}" alt="${item.altText}">
            </div>
            <div class="synopsisTitle">
                <h1>${item.title}</h1>
            </div>
        </div>
        <div class="synopsisText">
            <h2>${item.subTitle}</h2>
            <p>${item.synopsisText}</p>
        </div>
    </div>
    `
}).join(''); //Here...

document.getElementById("synopsis").innerHTML = synopsisRender; //...Or here, `synopsisRender.join('')`