Import custom component in Main app component

Hi there!

I am trying to import a simple custom component inside a Main app component. I took examples from the documentation. The custom component code located in ./dummy-item.f7.jsx is inspired from here:

const ListItem = (props) => {
  return <li>{props.title}</li>;
}

export default ListItem

The main app code is in ./app.f7.jsx:

import ListItem from './dummy-item.f7.jsx';

export default (props, {$f7, $f7ready, $on, $update }) => {
  const title = 'Hello World';

  // App events callback
  $on('click', () => {
    // callback
  });

  // This method need to be used only when you use Main App Component
  // to make sure to call Framework7 APIs when app initialized.
  $f7ready(() => {
    // do stuff
    console.log('Hello');
  });

  const openAlert = () => {
    $f7.dialog.alert(title, function() {
      // ok button callback
    });
  }

  return () => (
    <div id="app">
      <div class="panel panel-left panel-init">
        <div class="block">"Hello"</div>
      </div>
      <div class="view view-main view-init safe-areas">
        <div class="page">
          <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
              <div class="title">{title}</div>
            </div>
          </div>
          <div class="toolbar toolbar-bottom">
            <div class="toolbar-inner">
              <a onClick={() => openAlert()}>Open Alert</a>
              <a class="button button-fill" href="#" class="panel-open" data-panel=".panel-left">Left Panel</a>
            </div>
          </div>
          <div class="page-content">
            <ul>
              <ListItem title="Item 1" />
              <ListItem title="Item 2" />
              <ListItem title="Item 3" />
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}

Below is what I get:

Uncaught (in promise) Error: Framework7: Component render function is not a “function” type. Didn’t you forget to “return $render”?

I am a bit confused because $render is usually what I would use inside this code for instance, but not in JSX:

<template>
  <ul>
    <!-- use tag names as variables -->
    <${ListItem} title="Item 1" />
    <${ListItem} title="Item 2" />
    <${ListItem} title="Item 3" />
  </ul>
</template>
<script>
  // import component
  import ListItem from './dummy-item.f7';

  // export main component
  export default () => {
    return $render;
  }
</script>

My project is using webpack, Framework7 core and except that, everything works well.

Thanks in advance for your suggestions :wink:

Components must return a render function:

const ListItem = (props) => {
  return () => <li>{props.title}</li>;
}
1 Like

Thanks @nolimits4web !

By the way, I really appreciate the work you did on f7, especially the documentation. A wrote a book with an entire part on it, that will be soon published in CRC Press. It’s interfacing two very different languages (R and JS) and f7 was really a pleasure to work with!

1 Like

Wow, that sound cool! Let me know when your book is published so I can spread the word a bit about it