import { render } from "solid-js/web";
import { children, Component, JSX } from "solid-js";
interface MyForm {
firstName: string;
lastName: string;
age: number;
}
function Input<T extends { name: string }>(props: T) {
return <input name={props.name} />
}
function Form<T>(props: { children: Component<{ name: keyof T }>[] }) {
// I'm a beginner, I'm not sure if I'm using this helper correctly, but let's not focus on that
const c = children(() => props.children.map(child => child())); // child is not a function
return (
<form>
{c()}
</form>
);
}
function Example() {
return (
<Form<MyForm>>
<Input name="firstName" /> {/* OK */}
<Input name="qwe" /> {/* error! */}
</Form>
);
}
render(() => <Example />, document.getElementById("app")!);
import { render } from "solid-js/web";
import { children, Component, JSX } from "solid-js";
interface MyForm {
firstName: string;
lastName: string;
age: number;
}
function Input<T extends { name: string }>(props: T) {
return <input name={props.name} />
}
function Form<T>(props: { children: Component<{ name: keyof T }>[] }) {
// I'm a beginner, I'm not sure if I'm using this helper correctly, but let's not focus on that
const c = children(() => props.children.map(child => child())); // child is not a function
return (
<form>
{c()}
</form>
);
}
function Example() {
return (
<Form<MyForm>>
<Input name="firstName" /> {/* OK */}
<Input name="qwe" /> {/* error! */}
</Form>
);
}
render(() => <Example />, document.getElementById("app")!);