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>