React Native HTMLToPDF printing awkward character - react-native

Question

So I have this HTML template to transform to pdf using the RNHTMLToPDF package:
export default function getPdfTemplate(requestData, items, switchValues) {
return `
<div style="display: flex; flex-direction: column; width: 100%;">
<div id="pdf-header" style="display: flex; flex-direction: row; width: 100%;">
<div style="display: flex; flex-direction: column; width: 50%;">
<div style="font-size: 10px"> <b>Nome do cliente: </b> ${requestData.nomeCliente} </div>
<div style="font-size: 10px"> <b>Código do cliente: </b> ${
requestData.codigoCliente
} </div>
<div style="font-size: 10px"> <b>Número do pedido: </b> ${requestData.numPedido} </div>
<div style="font-size: 10px"> <b>Gerado em: </b> ${new Date().toLocaleDateString()} via Sistema de vendas </div>
</div>
<div style="display: flex; flex-direction: column; width: 50%;">
<div style="font-size: 10px"> <b>Data da negociação: </b> ${moment(
requestData.dataPedido,
"YYYYMMDD"
).format("DD/MM/YYYY")} - ${requestData.horaPedido} </div>
<div style="font-size: 10px"> <b>Quantidade de itens: ${
requestData.quantidadeItem
} </b> </div>
<div style="font-size: 10px"> <b>Valor total do pedido: </b> R$ ${
requestData.valorTotalPedido
} </div>
<div style="font-size: 10px"> <b>Valor do desconto negociado: </b> R$ ${
requestData.discount
} </div>
</div>
</div>
<hr style="margin: 14px 0 8px 0;">
<div id="pdf-table">
<h2 style="font-size: 10px; margin: 8px 0;">Lista de itens do pedido</h2>
<table style="background-color: #F3F3F4; width: 100%; border-collapse: collapse" >
<thead style="background-color: #656F7B;" >
<tr style="color: #FFF; font-size: 8px;" >
<th style="padding: 5px; font-size: 8px;">MERCADORIA</th>
<th style="padding: 5px; font-size: 8px;">QTDE</th>
<th style="padding: 5px; font-size: 8px;">COD BARRAS</th>
<th style="padding: 5px; font-size: 8px;">UNIT.LI+IMP</th>
<th style="padding: 5px; font-size: 8px;">TOL.LIQ+IMP</th>
<th style="padding: 5px; font-size: 8px;">COND PGTO</th>
<th style="padding: 5px; font-size: 8px;">VLR.FRETE</th>
<th style="padding: 5px; font-size: 8px;">FIL EXPED</th>
<th style="padding: 5px; font-size: 8px;">FIL FAT</th>
<th style="padding: 5px; font-size: 8px;">% DE ICMS</th>
</tr>
</thead>
<tbody>
${
items && items.length > 0 ? (
items.map(
(item, index) =>
`<tr style="line-height: 45px; background:${
index % 2 != 0 ? "#FFFFFF" : "initial"
}">
<td colspan="10" style="padding: 0px 10px; text-align:start; font-size: 8px;">${item.CODMER} - ${item.DESMER}</td>
<!--td colspan="9" style="font-size: 8px;"></td-->
</tr>
<tr style="margin: 4px 10px; line-height: 45px; background:${
index % 2 != 0 ? "#FFFFFF" : "initial"
}">
<td colspan="1" style="text-align:center; font-size: 6px;"> - </td>
<td colspan="1" style="text-align:center; font-size: 6px;">${
item.quantidadeMercadoria
}</td> <!-- qtd -->
<td colspan="1" style="text-align:center; font-size: 6px;">${
item.CODBRRMER
}</td> <!-- cód barras item -->
<td colspan="1" style="text-align:center; font-size: 6px;">
${(
item.VLRLIQMER +
item.VLRFRTMER +
item.stb.valorSTBTotal +
item.valorIPITotal
).toFixed(2)}
</td> <!-- Valor Unitário Líquido + Imposto + Frete -->
<td colspan="1" style="text-align:center; font-size: 6px;">
${(
(item.VLRLIQMER + item.VLRFRTMER) *
item.quantidadeMercadoria +
item.stb.valorSTBTotal +
item.valorIPITotal
).toFixed(2)}
</td> <!-- Total líquido + Imposto + Frete -->
<td colspan="1" style="text-align:center; font-size: 6px;">${
item.condicaoPagamento.codigoCondicaoPagamento
}</td> <!-- condição de pagamento -->
<td colspan="1" style="text-align:center; font-size: 6px;">${
switchValues.freightValue ? item.frete : ''
}</td> <!-- valor frete -->
<td colspan="1" style="text-align:center; font-size: 6px;">${
switchValues.exp ? item.CODFILEPD : ''
}</td> <!-- filial expedição -->
<td colspan="1" style="text-align:center; font-size: 6px;">${
switchValues.fat ? item.CODFILFAT : ''
}</td> <!-- filial faturamento -->
<td colspan="1" style="text-align:center; font-size: 6px;">
${
switchValues.icms
? item.mercadoria.percentualICMS
.percentualICMSMercadoria
: ''
}</td> <!-- percentual ICMS -->
</tr>`
)
) : null
}
</tbody>
</table>
</div>
<div id="pdf-footer">
<br>
<hr>
<h2 style="font-size: 10px;">Observações</h2>
<div style="border: 1px solid #9BA3A8; border-radius: 8px; margin: 8px 0; padding: 12px; font-size: 6px;">
** ATENÇÃO! As informações deste arquivo destinam-se a mera conferência da descrição, quantidade e valor (nesta data) dos itens pedidos, sendo certo que, até o faturamento da mercadoria, o pedido poderá sofrer alterações, seja pela falta de produto em estoque, por variações de alíquotas de ICMS, IPI, débitos do cliente perante o Fisco Estadual, entre outros motivos, razão pela qual este documento não vincula as partes.
</div>
<div style="border: 1px solid #9BA3A8; border-radius: 8px; margin: 8px 0; padding: 12px; font-size: 6px;">
** Informamos ainda, que o presente pedido encontra-se em aberto até a data do faturamento, pelo que V. Sa. poderá promover o cancelamento ou a inclusão de novos itens, o que poderá provocar a modificação dos percentuais de desconto, influenciando no preço final dos pedidos.
</div>
</div>
</div>
`
}
Printing this awkward comma character. I can't find it anywhere in the respective HTML
Any reason for this mystery?

Answer 1

Found the problem
Just had to add a join at the end of the map function item.map(el...).join('')