use template string in component name

[ngdangtu-vn]

This is the piece of my Preact code I used that can be demonstrate my idea:

interface GroupProps {
	title?: string
	lv?: number
	children: ComponentChildren
}
function Group(props: GroupProps) {
	const { title, lv, children } = props

	const H = lv && lv > 1 && lv <= 6 ? `h${lv}` as keyof JSX.IntrinsicElements : null

	return (
		<li class='credit-group' role='rowgroup'>
			{title && H && <H class='title'>{title}</H>}
			<ul class='list'>{children}</ul>
		</li>
	)
}

In short I want a group component to have a component has heading or not. If not, nothing happens. But if yes, the component can change the level of heading from 1 to 6.

For now, I don't know how to achieve the same thing in SolidJs as the H const above must always be a function. To me it is a very important features as it helps me to strict the component struct. So for now, I have to use if condition and switch for heading case which are not very good to look at.

And if for certain reason that this feature not exist and cannot be added, what is a better solution for my case? (I'm curious if anyone code like me)

Update, the current case I playing with is a bit more challenging:

I want to merge component <A/> from solidjs/router with HTML anchor <a>. That is where headache begins :D

[ngdangtu-vn]

I found this article: https://github.com/solidjs/solid/tree/main/packages/solid/h

So I tried like this:

export interface ButtonIconProps
{
	model: 'a' | 'A'
	href?: string
}

export function ButtonIcon(props: ButtonIconProps)
{
	const { model, href: url } = props

	const minProps = {
		href: url
	}

	return h(model === 'A' && A, minProps)
}

And it failed, where did I do wrong?

[snnsnn]

I don't know your use case but you can use Dynamic component to create elements dynamically:

import { render, Dynamic } from 'solid-js/web';
import { Component } from 'solid-js';

export const Comp: Component<{ hasHeading: boolean }> = (props) => {
    const Heading = () => props.hasHeading ? <Dynamic component={'h1'} children={"Content of the heading"} /> : null
    return (
      <div>
      <Heading />
      <div>Some Other Content</div>
      </div>
    );
}

export const App = () => {
  return <div><Comp hasHeading={true} /></div>;
};

render(() => <App />, document.body);

[ngdangtu-vn]

Oh, it looks nice. The code is much consistence than using hyperscript h().

[snnsnn]

Actually you can inline the element directly for more concise solution and this performs better than the previous one because we remove the unnecessary function call that comes from <Heading />:

export const Comp: Component<{ hasHeading: boolean }> = (props) => {
  return (
    <div>
      {props.hasHeading ? (
        <Dynamic component={'h1'} children={'Content of the heading'} />
      ) : null}
      <div>Some Other Content</div>
    </div>
  );
};

[mdynnl]

Dynamic only cares about function or string so this works

<Dynamic component={props.hasHeading && 'h1'}>Content of the heading</Dynamic>