javascriptpreact

My Preact component does not render a child component

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?

Solution

  • 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>