Sigo recibiendo el mensaje de error ',' esperado. ts (1005) cuando intento renderizar dinámicamente un modal en Typescript. Es casi seguro que me falta un corchete de cierre en alguna parte, pero no puedo entender dónde.
`<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> </div> </div> </div> )} </div>`¡Cualquier ayuda sería apreciada!
No cerraste el literal de cadena que se estaba asignando desde 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> </div> </div> </div>` )} </div>`;Menos de una respuesta que una diatriba con buenas intenciones.
Este código es ilegible y, por eso, encontrar el acento grave que falta es extremadamente tedioso. He aquí cómo hacerlo menos horrible. * Editado por brevedad.
Paso 1: sangría. No somos salvajes.
Este paso solo es suficiente para resolver el problema.
` <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')} </div> </div> </div> </div> `).join('\n')} </div> </div> `Paso 2: No hagas tanto a la vez. Deja que tu código respire.
Hay dos pseudo-"componentes" para extraer, ambas funciones para map . Esto aclara su intención y reduce el área superficial del código principal.
El interior es simple:
const makeOption = opt => `<p class="selectSize">${option.value}</p>`El externo es cada vez más complejo, pero al mantener la sangría, agregar algunos espacios en blanco aclaratorios y usar el "componente" interno, es mucho más limpio:
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')} </div> </div> </div> </div> `Cuanto más pequeños son los fragmentos funcionales, más fácil es detectar y mitigar los errores. También es más fácil modificar/actualizar/parametrizar/etc.
Paso 3: Átalo todo junto
Ahora el componente general es wee:
` <div class="modalWrap"> <h2 class="modalHeader">Shop The Look</h2> <div class="modalContent"> ${object.map(makeProdDetail).join('\n')} </div> </div> `Todo sin probar, pero más o menos correcto.
Paso 4: Dale a las cosas nombres significativos.
object => productsel => product