RamondaRMD011 — A function was used as a JSX tag
A function has nothing to construct, no state and no lifecycle, so as a tag it names nothing the framework can keep hold of.
TypeScript catches most of it without help. JSX.ElementType is deliberately not declared, so the
compiler's default rule applies — a tag has to return one JSX.Element — and a function returning
several nodes, or anything that is not a node, is refused as TS2786. What it lets through is a
function returning exactly ONE element, which is precisely how a function component gets written
by habit. That is what this fires on, types or no types.
For markup you reuse, call the function in an expression slot — {sideBar()} — where it reads as
the value it is. For state and lifecycle with no markup, use a Hook. For both, make it a
component: a component owns whatever its render returns, including nothing at all.
Next
- All diagnostics — every code the framework can report.
- Checking your app — the faults proved from the source, before anything runs.