I am new to Preact, and I can't get it to work. I expect this code to render "TEST SUCCESSFUL", but it only renders "TEST"
<div id="app"></div>
<script type="importmap">
{
"imports": {
"preact": "https://esm.sh/preact@10.23.1",
"htm/preact": "https://esm.sh/htm@3.1.1/preact?external=preact"
}
}
</script>
<script type="module">
import { render } from 'preact'
import { html } from 'htm/preact'
function Successful() {
return html`
<div>SUCCESSFUL</div>
`
}
function App() {
return html`
<div>TEST</div>
<Successful />
`
}
render(html`<${App} />`, document.getElementById('app'));
</script>
There does not seem to be any error, either. What am I doing wrong?
Looks like you need to interpolate the Successful
component in the html
tag template too:
<div id="app"></div>
<script type="importmap">
{
"imports": {
"preact": "https://esm.sh/preact@10.23.1",
"htm/preact": "https://esm.sh/htm@3.1.1/preact?external=preact"
}
}
</script>
<script type="module">
import { render } from 'preact'
import { html } from 'htm/preact'
function Successful() {
return html`
<div>SUCCESSFUL</div>
`
}
function App() {
return html`
<div>TEST</div>
<${Successful} />
`
}
render(html`<${App} />`, document.getElementById('app'));
</script>