Go Behind the Experience to see how Tecovas brings the West to life with Sanity 🤠 July 18th

React app error due to undefined variable and incorrect data handling

15 replies
Last updated: Jul 31, 2022
Hello! I'm building my first React app with Sanity following User's tutorial here . I've made a document type called 'item' in my Sanity Studio, but whenever I try to pull fields from it i.e. {item.title}, I get errors saying "'item' is not defined" at each line. I've set up my schemas as per the video, and I'm using this fetch:

useEffect(() => {
`sanityClient.fetch(
*[_type == "item"]{

title,

slug,

mainImage,

}
)`
.then((_data_) => setItemData(_data_))

.catch(console.error);

})
Jul 31, 2022, 1:17 AM
The error doesn’t come from here. This code snippet is fine.
Jul 31, 2022, 10:10 AM
Hi User, thanks for replying. Do you have any idea where it could be coming from – somewhere further back in the chain maybe? I can send more code privately if you're up for helping.
Jul 31, 2022, 10:46 AM
Can you show the actual error please? Because
item is not defined
means it‘s something about an
item
constant, which doesn’t show in the code you shared.
Jul 31, 2022, 11:37 AM
That's the error, and here's the full Home.js:
Jul 31, 2022, 11:41 AM
import { useState, useEffect } from 'react';
import { NavLink, Link } from 'react-router-dom';
import './Home.css';
import sanityClient from '../client';

export default function Home() {
  const [itemData, setItemData] = useState(null);

  useEffect(() => {
    sanityClient
      .fetch(
        `*[_type == 'item']{
            title,
            slug,
            mainImage,
            game,
            category,
            publishedAt,
            caption
        }`
      )
      .then((data) => setItemData(data))
      .catch(console.error);
  });

  return (
    <div>
      <section className='intro flex align-items-flex-end justify-space-between'>
        <h1>
          Heading here
        </h1>
        <NavLink to='/items' className='btn btn--inverse'>
          View all
        </NavLink>
      </section>
      <section className='latest-items'>
        <div className='grid w-100'>
          <div className='card flex'>
            <Link to={'/items/' + item.slug.current} key={item.slug.current}>
              <div className='card__img'></div>
              <div className='card__title'>
                <h4>{item.title}</h4>
              </div>
            </Link>
            <div className='card__filters flex'>
              <a href='' className='game'>
                {item.game}
              </a>
              <a href='' className='category'>
                {item.category}
              </a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
Jul 31, 2022, 11:41 AM
Yeah, I mean the error is pretty explicit. You refer to a variable called
item
all throughout your JSX, but it doesn’t exist?
Jul 31, 2022, 11:42 AM
In the tutorial, User sets it up that way only hers is {project.title}, {project.slug} etc. with no errors. I changed 'project' to 'item' throughout (including the schemas etc.) but I'm getting that error....
Jul 31, 2022, 11:44 AM
I've been back through everything a few times but admittedly I'm brand new to Sanity.
Jul 31, 2022, 11:44 AM
This is not a Sanity issue here, it’s is really a JavaScript error: the
item
constant you reference all over doesn’t exist, hence the error.
If you’re using Next.js, you will want to perform your query in
getStaticProps
, and pass down the data from Sanity to your component. Fetching data in a
useEffect
hook is not recommended and goes against Next.js principles.
Jul 31, 2022, 11:46 AM
No, just vanilla React.
Jul 31, 2022, 11:49 AM
Like create-react-app or did you build your own thing?
Jul 31, 2022, 11:50 AM
create-react-app, I followed the tutorial I linked.
Jul 31, 2022, 11:51 AM
Alright. Then you have two issues right now:• You reference a variable called
item
but you store your data in a
itemData
state.• You fetch an array of items, but try to render a single one.
Jul 31, 2022, 11:52 AM
I forgot to map over everything! That's fixed the
item
error, but now I get a blank white screen shortly after the page loads – presumably right as that array is loaded. Appreciate your help!
Jul 31, 2022, 12:11 PM
Check your console for errors. 🙂
Jul 31, 2022, 12:12 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?