How to solve ts(2322) error on "each" attribute of "For" component
I'm trying to render items using the built-in "For" component for solid but I keep getting the following error:
Source code:
Type '(() => Promise<any>) | undefined' is not assignable to type 'false | readonly any[] | null | undefined'.
Type '() => Promise<any>' is not assignable to type 'false | readonly any[] | null | undefined'.ts(2322)
flow.d.ts(17, 5): The expected type comes from property 'each' which is declared here on type 'IntrinsicAttributes & { each: false | readonly any[] | null | undefined; fallback?: Element; children: (item: any, index: Accessor<number>) => Element; }'Type '(() => Promise<any>) | undefined' is not assignable to type 'false | readonly any[] | null | undefined'.
Type '() => Promise<any>' is not assignable to type 'false | readonly any[] | null | undefined'.ts(2322)
flow.d.ts(17, 5): The expected type comes from property 'each' which is declared here on type 'IntrinsicAttributes & { each: false | readonly any[] | null | undefined; fallback?: Element; children: (item: any, index: Accessor<number>) => Element; }'Source code:
import { For, Show, createResource } from "solid-js";
import Card from "../components/Card";
const fetchProducts = async () => {
const res = await fetch('http://localhost:4000/products');
return res.json;
}
export default function Home() {
const [products] = createResource(fetchProducts);
return(
<Show when={products()} fallback={<p>Loading</p>}> <div class='grid grid-cols-4 gap-10 my-4'>
<For each={products()}>
{(product) => (
<Card rounded={true} flat={true}></Card>
)}
</For>
</div>
</Show>
// <p>{console.log(products(), products.loading)}</p>
);
}import { For, Show, createResource } from "solid-js";
import Card from "../components/Card";
const fetchProducts = async () => {
const res = await fetch('http://localhost:4000/products');
return res.json;
}
export default function Home() {
const [products] = createResource(fetchProducts);
return(
<Show when={products()} fallback={<p>Loading</p>}> <div class='grid grid-cols-4 gap-10 my-4'>
<For each={products()}>
{(product) => (
<Card rounded={true} flat={true}></Card>
)}
</For>
</div>
</Show>
// <p>{console.log(products(), products.loading)}</p>
);
}
