<For> throws hydradtion error with a <span> as fallback element
This fails
This works
Seems like a bug but maybe I am doing something wrong?
<>
<div id="products-container">
<For each={props.products()} fallback={<span>loading</span>}>
{(product, i) => {
debugger;
return (
<ProductItem product={product} key={`${i()}-${product.id}`} />
);
}}
{/* {(product, i) => (
<div style={{ background: "red" }}>product {i()}</div>
)} */}
</For>
</div>
</> <>
<div id="products-container">
<For each={props.products()} fallback={<span>loading</span>}>
{(product, i) => {
debugger;
return (
<ProductItem product={product} key={`${i()}-${product.id}`} />
);
}}
{/* {(product, i) => (
<div style={{ background: "red" }}>product {i()}</div>
)} */}
</For>
</div>
</>This works
<>
<div id="products-container">
<For each={props.products()} fallback="loading">
{(product, i) => {
debugger;
return (
<ProductItem product={product} key={`${i()}-${product.id}`} />
);
}}
{/* {(product, i) => (
<div style={{ background: "red" }}>product {i()}</div>
)} */}
</For>
</div>
</> <>
<div id="products-container">
<For each={props.products()} fallback="loading">
{(product, i) => {
debugger;
return (
<ProductItem product={product} key={`${i()}-${product.id}`} />
);
}}
{/* {(product, i) => (
<div style={{ background: "red" }}>product {i()}</div>
)} */}
</For>
</div>
</>Seems like a bug but maybe I am doing something wrong?
