Gets error JSX element type 'XXX' does not have any construct or call signatures.

[aychernov]

const HeaderComponent = {
  view: (vnode) => <div>Hello, {vnode.attrs.name}!</div>
};

export default HeaderComponent;

import HeaderComponent from './Button';

export const App = {
  view: () => (
    <div>
      <HeaderComponent name='World' />
    </div>
  )
};

[aychernov]

Hi Chris, can you give some advice about this error?

[chris9740]

Hello!

When you want to render a component with this syntax: <HeaderComponent name="World" />, you have to write it as a class:

import m, { ClassComponent, Component } from "mithril";

export default class HeaderComponent implements ClassComponent {
    view(vnode: m.Vnode<{name: string;}, this>): void | m.Children {
        return <div>Hello, {vnode.attrs.name}</div>
    }
}

export const App: Component = {
    view() {
        return (
            <div>
                <HeaderComponent name="World" />
            </div>
        );
    },
};

If you want to use a const component, you have to render it like this:

import m, { Component, Vnode } from "mithril";

export const HeaderComponent = {
    view(vnode: Vnode<{name: string;}>) {
        return <div>Hello, {vnode.attrs.name}</div>
    }
}

export const App: Component = {
    view() {
        return (
            <div>
                {m(HeaderComponent, {name: "World"})}
            </div>
        );
    },
};

Hope this helps!