I continuously get an error when going onto the page listed as code here. I have tried undoing changes and nothing seems to be working for me. The error says: "Error: Objects are not valid as a React child (found: object with keys {id, name, published_at, created_at, updated_at}). If you meant to render a collection of children, use an array instead.
import { GetWatch } from "../../../utils/functions/getWatch";
import { Header } from "../../../components/header";
import { Navbar } from "../../../components/navbar";
import Image from "next/image";
import { DetailBox } from "../../../components/catalog/detailBox";
import { HeadContent } from "../../../components/headContent";
export default function WatchPage({ watch }) {
return (
<>
<HeadContent title={watch.name} description={`About ${watch.name}`} />
<main>
<Header />
<Navbar />
<div className="lg:mt-20 lg:mb-20 mb-4 w-full flex flex-col lg:justify-center">
<div className="flex flex-col items-center lg:flex-row lg:items-start">
<div className="lg:ml-20">
<Image
src={`${process.env.SERVER_URL}${watch.images[0].url}`}
alt=""
width={500}
height={500}
className="lg:rounded-md"
/>
</div>
<div className="lg:flex lg:flex-col text-center lg:ml-60 lg:mr-20">
<div className="text-3xl">{watch.name}</div>
<div className="text-xl font-light opacity-70">
- {watch.description} -
</div>
<div className="mt-4">{watch.about}</div>
<DetailBox watch={watch} />
</div>
</div>
</div>
</main>
</>
);
}
export async function getServerSideProps({ query: { id } }) {
const { data, error } = await GetWatch(id);
if (error !== null) {
return {
notFound: true,
};
}
if (data == null) {
return {
notFound: true,
};
}
return { props: { watch: data } };
}
The data structure being returned from the API and being passed to the function via getServerSideProps looks like this:
{
"id": 1,
"name": "Test Watch",
"description": "A test Watch ",
"about": "A very good test watch",
"series": "test",
"model": "test",
"gender": "male",
"movement": "test",
"engine": "test",
"power_reserve": "test",
"dial_type": "test",
"dial_color": "test",
"crystal": "test",
"hands": "test",
"bezel_material": "test",
"crown": "test",
"band_type": "test",
"band_material": "test",
"band_width": "test",
"band_length": "test",
"clasp": "test",
"case_diameter": "test",
"case_thickness": "test",
"case_material": "test",
"case_shape": "test",
"case_back": "test",
"water_resistance": "test",
"functions": "test",
"features": "test",
"warranty": "test",
"upc_code": "test",
"sku": "test",
"band_color": "test",
"calendar": "test",
"luminiscence": "test",
"watch_label": "test",
"product_category": "test",
"watch_style": "test",
"brand": {},
"published_at": "2021-07-25T07:51:58.944Z",
"created_at": "2021-07-25T07:38:26.842Z",
"updated_at": "2021-07-28T07:37:52.136Z",
"images": [{
"id": 1,
"name": "randomwatch.jpeg",
"alternativeText": "",
"caption": "",
"width": 1000,
"height": 667,
"formats": {
"thumbnail": {
"name": "thumbnail_randomwatch.jpeg",
"hash": "thumbnail_randomwatch_c7228f156b",
"ext": ".jpeg",
"mime": "image/jpeg",
"width": 234,
"height": 156,
"size": 10.9,
"path": null,
"url": "/uploads/thumbnail_randomwatch_c7228f156b.jpeg"
},
"medium": {
"name": "medium_randomwatch.jpeg",
"hash": "medium_randomwatch_c7228f156b",
"ext": ".jpeg",
"mime": "image/jpeg",
"width": 750,
"height": 500,
"size": 80,
"path": null,
"url": "/uploads/medium_randomwatch_c7228f156b.jpeg"
},
"small": {
"name": "small_randomwatch.jpeg",
"hash": "small_randomwatch_c7228f156b",
"ext": ".jpeg",
"mime": "image/jpeg",
"width": 500,
"height": 334,
"size": 40.85,
"path": null,
"url": "/uploads/small_randomwatch_c7228f156b.jpeg"
}
},
"hash": "randomwatch_c7228f156b",
"ext": ".jpeg",
"mime": "image/jpeg",
"size": 125.13,
"url": "/uploads/randomwatch_c7228f156b.jpeg",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"created_at": "2021-07-25T12:51:21.086Z",
"updated_at": "2021-07-25T12:51:21.100Z"
}]
}
