shadow pivot
I've been struggling a few days with getting a test details page working from a list page. Coming from Vue so am bending my head around new things.
Here is the details page code which is on the route (2 as a sample id): http://localhost:5173/users/2/
import { component$ } from '@builder.io/qwik';
import { routeLoader$ } from '@builder.io/qwik-city';
import type { DocumentHead } from '@builder.io/qwik-city';
export const useUserLoader = routeLoader$(async ({ params }) => {
const id = params.id;
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id})`);
const user = await response.json();
return user;
});
export default component$(() => {
const user = useUserLoader();
return (
<div>
{(user.value && user.value)} detail here
</div>
)
});
export const head: DocumentHead = {
title: 'Welcome to Qwik',
meta: [
{
name: 'description',
content: 'Qwik site description',
},
],
};
The error is:
One of the children of <div> is not an accepted value. JSX children must be either: string, boolean, number, <element>, Array, undefined/null, or a Promise/Signal. Instead, it's an instance of "SignalDerived".
The list page works fine calling the same API, so I'm confused as to where I'm going wrong. (attachment)
grave pumice
viscid rover
