🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

Issue with rendering a React component in a tutorial, resolved with assistance from Maciej.

10 replies
Last updated: Feb 16, 2023
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:

import Layout from "@/components/layout";

import { groq } from 'next-sanity'

import client from '@/lib/sanity/sanity.client';
`const query = groq``

*[_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
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
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
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
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
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 &lt;h1&gt;{home.title}&lt;/h1&gt; that states: Property 'title' does not exist on type 'never'.
Feb 16, 2023, 2:57 PM
Assuming I need something like this?type Props = {
title: string
}
Feb 16, 2023, 2:58 PM
yes you would set that as the state type and fetch return type
Feb 16, 2023, 3:01 PM
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
You've completely made my morning! Greetings from Boston User!!Have a wonderful rest of your day!
Feb 16, 2023, 3:04 PM
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.

Was this answer helpful?