Contentful API error saying Cannot read property 'fields' of undefined / using React + ViteApp

APIs
1

I’m using contentful as my backend but I founded some issues while testing my app

import { useParams } from 'react-router-dom';
import Footer from './Footer';
import Navbar from './Navbar';
import { useEffect, useState } from 'react';
import * as contentful from 'contentful';
export default function Event() {
  const { id } = useParams();
  const [data, setData] = useState([]);
  useEffect(() => {
    async function fetchContentModel() {
      const client = contentful.createClient({
        space: import.meta.env.VITE_CONTENTFUL_SPACE,
        accessToken: import.meta.env.VITE_CONTENTFUL_PRIVATE_API_KEY,
      });

      const contentModel = await client.getEntries({ content_type: 'posts' });
      const contentData = contentModel.items;
      const res = contentData.reverse();
      setData(res);
    }
    fetchContentModel();
  }, []);
  let specificEvent = data.find((e) => e.sys.id === id);
  return (
    <div>
      <p>{id}</p>
      <Navbar />
      <section>
        <div className='container px-4 mx-auto mt-5 mb-14'>
          <div className='max-w-3xl'>
            <a
              className='inline-block font-heading text-yellow-400 hover:text-yellow-400 mb-2'
              href='#'
            >
              {specificEvent.fields.type}
            </a>
            <h3 className='font-heading text-3xl sm:text-4xl mb-8'>
              {specificEvent.fields.postTitle}
            </h3>
          </div>
        </div>
        <img
          className='block w-full h-112 object-cover'
          src={specificEvent.fields.postCover.fields.file.url}
          alt=''
        />
        <div className='container px-4 mx-auto'>
          <div className='max-w-3xl mx-auto pt-12 pb-14'>
            <p className='text-lg leading-8 mb-6'>
              {specificEvent.fields.postContent}
            </p>
          </div>
        </div>
      </section>
      <Footer />
    </div>
  );
}

At first it works fine and i can see the full webpage but in the second attempt it throws an error in the console and in the output of the page saying “Contentful API error saying Cannot read property ‘fields’ of undefined” I searched the whole web trying to figure out whats wrong and i did not find any suitable fix ,
Please I need help …

2

I can’t be sure from the information given, but it seems like the problem is that you are referencing the fields property of the specificEvent object when it isn’t defined. specificEvent is created here:
let specificEvent = data.find((e) => e.sys.id === id);

So if specificEvent is undefined, probably there was no post that had an id that matched the id parameter passed in to the web page. You could check that the object is defined before accessing its fields property, either by checking specificEvent just after it is defined, or by doing a null check on access, like specificEvent?.fields.type.