Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed 12 months ago .

I keep getting the error message ',' expected.ts(1005) when trying to dynamically render a modal on Typescript. I'm almost certainly missing a closing curly bracket somewhere but cant figure out where.

      `<div class="modalWrap">
      <h2 class="modalHeader">Shop The Look</h2>
      <div class="modalContent">${object.map((el) => 
      `<div class="prodDetails">
        <img class="prodImg" alt="prodImage" src = ${el.primaryImage.url}></img>
        <p class="prodName">${el.name}</p>
        <p class="prodPrice">${el.price.value}</p>
        <div class = "selectWrapper">
    <div class="selectNumber">
    <div class="numberWrapper"> 
  ${el.sizeOptions
    .map(
      (option) => `
      <p class="selectSize" >${option.value}</p>`
    .join('')}
    </div>`
Any help would be appreciated!
                This is almost illegible. That aside, consistent indentation would help you find the issue, and not trying to do too much at once.
– Dave Newton
                May 12, 2022 at 15:07
                You can easily identify missing braces if you install 'Rainbow Brackets ' extension in VS Code. Please check this if you have a typescript version problem stackoverflow.com/a/46399668/12467484.
– shehanpathi
                May 12, 2022 at 15:08
                @shehanpathirathna Except that it's not a missing brace/bracket/paren. The poor formatting hides the issue.
– Dave Newton
                May 12, 2022 at 15:09
Less of an answer than a rant with good intentions.
This code is illegible, and because of that, finding the missing backtick is extremely tedious. Here's how to make it less awful. * Edited for brevity.
Step 1: Indent. We're not savages.
This step alone is enough to resolve the issue.
<div class="modalWrap">
  <h2 class="modalHeader">Shop The Look</h2>
  <div class="modalContent">
    ${object.map(el => `
      <div class="prodDetails">
        <img class="prodImg" alt="prodImage" src = ${el.primaryImage.url}></img>
        <p class="prodName">${el.name}</p>
        <p class="prodPrice">${el.price.value}</p>
        <div class = "selectWrapper">
          <div class="selectNumber">
            <div class="numberWrapper"> 
              ${el.sizeOptions.map(option => `
                <p class="selectSize" >${option.value}</p>
              `).join('\n')}
    `).join('\n')}
Step 2: Don't do so much at once. Let your code breathe.
There are two pseudo-"components" to pull out, both functions to map. This clarifies their intent and reduces the surface area of the mainline code.
The inner one is simple:
const makeOption = opt => `<p class="selectSize">${option.value}</p>`
The outer one is incrementally more complex, but by maintaining indentation, adding some clarifying whitespace, and using the inner "component", it's much cleaner:
const makeProdDetail = el => `
  <div class="prodDetails">
    <img class="prodImg" alt="prodImage" src=${el.primaryImage.url}></img>
    <p class="prodName">${el.name}</p>
    <p class="prodPrice">${el.price.value}</p>
    <div class="selectWrapper">
      <div class="selectNumber">
        <div class="numberWrapper"> 
          ${el.sizeOptions.map(makeOption).join('\n')}
The smaller the functional chunks are the easier spotting and mitigating mistakes is. It's also easier to modify/update/parameterize/etc.
Step 3: Tie it all together
Now the overall component is wee:
<div class="modalWrap">
  <h2 class="modalHeader">Shop The Look</h2>
  <div class="modalContent">
    ${object.map(makeProdDetail).join('\n')}
All untested, but roughly correct.
Step 4: Give things meaningful names.
object => products
el => product
                This was very useful, thank you. Accept that my code is quite messy and difficult to read so will try it keep the overall component as wee as possible. Still in my infancy as a developer so every day is a school day!
– user16732475
                May 12, 2022 at 15:57
You didn't close the string literal that was being mapped from object:
const test = `<div class="modalWrap">
<h2 class="modalHeader">Shop The Look</h2>
<div class="modalContent">${object.map(
    (el) =>
        `<div class="prodDetails">
  <img class="prodImg" alt="prodImage" src = ${el.primaryImage.url}></img>
  <p class="prodName">${el.name}</p>
  <p class="prodPrice">${el.price.value}</p>
  <div class = "selectWrapper">
<div class="selectNumber">
<div class="numberWrapper"> 
${el.sizeOptions
    .map(
        (option) => `
<p class="selectSize" >${option.value}</p>`
    .join('')}
</div>`
</div>`;