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(() => {
*[_type == "item"]{




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


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
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(() => {
        `*[_type == 'item']{
      .then((data) => setItemData(data))

  return (
      <section className='intro flex align-items-flex-end justify-space-between'>
          Heading here
        <NavLink to='/items' className='btn btn--inverse'>
          View all
      <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'>
            <div className='card__filters flex'>
              <a href='' className='game'>
              <a href='' className='category'>
Jul 31, 2022, 11:41 AM
Yeah, I mean the error is pretty explicit. You refer to a variable called
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
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
, and pass down the data from Sanity to your component. Fetching data in a
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
but you store your data in a
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
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?