Skip to content

Diagnostics

LUM2004: Component called as a function

A component is called as a function instead of rendered with JSX.

Severity: error · Category: reactivity (2xxx)

Reported by: the compiler.

#What it means

{Card({ title })} runs Card inside the caller: it gets no owner of its own, its props are not reactive getters, and cleanups, context and boundaries attach to the wrong component.

#Example

tsx

export function List(props: { items: string[] }) {
  return <ul>{props.items.map((item) => Item({ label: item }))}</ul>;
}

#How to fix it

Render it with JSX: <Item label={item} />. To choose a component at runtime, use <Dynamic component={X} … />.

Components