-
|
i'm unable to render a button in a loop, it'll only be rendered at the end and only once. Relevant screenshot: 
MRE typescript: import { html } from "@arrow-js/core"
const button = html`<button>I'm a button</button>`
const data = [
"wow",
"umazing",
"amazing",
"awesome",
"beautiful",
"wonderful",
"lovely",
"uwu",
":3",
]
const list = data.map((value) => {
return html`<h1>${value}</h1> ${button}`
})
// render the page
html`${list}`(document.body)MRE html: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" src="./scripts/mre.ts" defer></script>
</head>
<body>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
Answered by
bokunodev
Mar 22, 2026
Replies: 1 comment
-
|
found a solution. for some reason arrow function and a function returning an html template behaves differently. function button() {
return html`<button>123</button>`
}
const list = data.map((value) => {
return html`<h1>${value}</h1> ${button}`
}) |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
bokunodev
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
found a solution. for some reason arrow function and a function returning an html template behaves differently.