I’m in the process of converting some existing widgets using the deprecated string HTML templates to the new html function for tagged templates. I’m having trouble with a template like this:
const lines = ['line1', 'line2', 'line3'];
return `<p>${lines.implode('<br>')}</p>`;
This is a simplified example – importantly, the number of lines is variable, it depends on the record that the template is being rendered with. This used to work fine, but I’m not sure how to convert it to the new tagged template syntax. I got as far as this:
const lines = ['line1', 'line2', 'line3'];
return html`<p>${lines.map(
(line, index) => html`${line}${index == line.length ? '' : html`<br>`}`
)}</p>`;
But this doesn’t work, I think because the string interpolation converts the nested VNode to a string? Not sure, I don’t usually work with React/Preact.
How can I solve this? Remember I don’t know the number of lines, so I can’t just hardcode two <br> tags.
Right now I’ve got a workaround using white-space: pre-line, but I’d like to know how to deal with a variable number of elements in general for cases like this.