Issue with rendering a React component in a tutorial, resolved with assistance from Maciej.
10 replies
Last updated: Feb 16, 2023
B
Hi! Hope all is well. I'm having an issue whilst following a tutorial that I can't figure out and was hoping to get a bit of help understanding:Any help would be gladly appreciated!
Error here:
Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
code:
`const query = groq``
Schema:
Error here:
Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
code:
import Layout from "@/components/layout";
import { groq } from 'next-sanity'import client from '@/lib/sanity/sanity.client';
*[_type == "home"] {title
}```
export default async function Home() { const home = await client.fetch(query)
console.log(home)
return (
<Layout>
<h1>{home.title}</h1></Layout>
);
}
Schema:
import { defineType, defineField } from 'sanity'export default defineType({ name: 'home',
type: 'document',
title: 'Home',
fields: [
defineField({ title: 'Title',
name: 'title',
type: 'string',
validation: (Rule) => Rule.required(),
}),
],
preview: { select: { title: 'title',
},
prepare({ title }) { return { subtitle: 'Home',
title,
}
},
},
})
Feb 16, 2023, 2:13 PM
M
Hey User, the problem here seems to be that you are trying to make the react component itself asynchronous which won’t work. Instead you need to create a state for home title, put the asynchronous call into a useEffect where you await the data and set the home title state.
Feb 16, 2023, 2:38 PM
M
Also, I highly recommend putting these types of questions into chat gpt since it can solve it for you 🙂
Feb 16, 2023, 2:38 PM
B
Hi User! It's odd to me I'm following a tutorial and this is how it's working. I'm new to react so I'm not sure entirely how to do so. ChatGPT is at capacity right now 😅. I used to get around with incognito mode but that seems to be patched up now.Would you happen to know some working code I code use in the meantime to get around this error?
Feb 16, 2023, 2:46 PM
M
Huh, weird I’m in without a problem 🙂Here’s what the chat came up with:
import Layout from "@/components/layout";
import { groq } from 'next-sanity'
import client from '@/lib/sanity/sanity.client';
import { useEffect, useState } from 'react';
const query = groq`
*[_type == "home"] {
title
}
`;
export default function Home() {
const [home, setHome] = useState(null);
useEffect(() => {
const fetchHome = async () => {
const data = await client.fetch(query);
setHome(data[0]);
};
fetchHome();
}, []);
if (!home) {
return <div>Loading...</div>;
}
return (
<Layout>
<h1>{home.title}</h1>
</Layout>
);
}Feb 16, 2023, 2:47 PM
B
Right, I will continue to try refreshing, I really appreciate your assistance!I'm a bit warmer, now the error page went away and I can see the page being rendered. The object is being logged to the console.
I forgot to mention I'm using Typescript. There's currently an error under the <h1>{home.title}</h1> that states: Property 'title' does not exist on type 'never'.
I forgot to mention I'm using Typescript. There's currently an error under the <h1>{home.title}</h1> that states: Property 'title' does not exist on type 'never'.
Feb 16, 2023, 2:57 PM
B
Assuming I need something like this?type Props = {
title: string
}
title: string
}
Feb 16, 2023, 2:58 PM
M
yes you would set that as the state type and fetch return type
Feb 16, 2023, 3:01 PM
M
import Layout from "@/components/layout";
import { groq } from 'next-sanity'
import client from '@/lib/sanity/sanity.client';
import { useEffect, useState } from 'react';
const query = groq`
*[_type == "home"] {
title
}
`;
type HomeType = {
title: string
}
export default function Home() {
const [home, setHome] = useState<HomeType | null>(null);
useEffect(() => {
const fetchHome = async () => {
const data = await client.fetch<HomeType[]>(query);
setHome(data[0]);
};
fetchHome();
}, []);
if (!home) {
return <div>Loading...</div>;
}
return (
<Layout>
<h1>{home.title}</h1>
</Layout>
);
}Feb 16, 2023, 3:01 PM
B
You've completely made my morning! Greetings from Boston User!!Have a wonderful rest of your day!
Feb 16, 2023, 3:04 PM
M
glad I could help, have a great day 🙂
Feb 16, 2023, 3:05 PM
Sanity– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.