TypeError: Cannot destructure property 'company' of 'jobs[value]' as it is undefined

Question

I am using useEffect and useState hooks to fetch data and destructure it. But I'm getting this error every time.

Here is the code.

import React, { useState, useEffect } from 'react';
import { FaAngleDoubleRight } from 'react-icons/fa';
import Jobs from './Jobs';
// ATTENTION!!!!!!!!!!
// I SWITCHED TO PERMANENT DOMAIN
const url = 'https://course-api.com/react-tabs-project';
function App() {
  const [loading, setLoading] = useState(true);
  const [jobs, setJobs] = useState([]);
  const [value, setValue] = useState(0);

  const fetchJobs = async () => {
    const response = await fetch(url);
    const newJobs = await response.json();
    setJobs(newJobs);
    setLoading(false);
    // console.log(newJobs);
  };
  useEffect(() => {
    fetchJobs();
  }, []);

  const{company, dates, duties, title}=jobs[value];
  console.log(jobs[value]);
  // const { company, dates, duties, title } = jobs[value];
  return (
    <section className='section '>
      <div className='title'>
        <h2>experience</h2>
        <div className='underline'></div>
      </div>
      {/* <Jobs jobs={jobs} /> */}
    </section>
  );
}

export default App;

Error image

If I comment out the destructuring, I get the value 6 times. The First 2 times it is undefined.

browser console

Answer 1

You are destructuring properties from the object when still the data is not fetched and the array length is 0

import React, { useState, useEffect } from "react";
import { FaAngleDoubleRight } from "react-icons/fa";
import Jobs from "./Jobs";
// ATTENTION!!!!!!!!!!
// I SWITCHED TO PERMANENT DOMAIN
const url = "https://course-api.com/react-tabs-project";
function App() {
  const [loading, setLoading] = useState(true);
  const [jobs, setJobs] = useState([]);
  const [value, setValue] = useState(0);

  const [currentJob, setCurrentJob] = useState();

  const fetchJobs = async () => {
    const response = await fetch(url);
    const newJobs = await response.json();
    setJobs(newJobs);
    setLoading(false);
    if (newJobs.length > 0) setCurrentJob(newJobs[value]);
    // console.log(newJobs);
  };
  useEffect(() => {
    fetchJobs();
  }, []);

  //   const{company, dates, duties, title}=jobs[value];
  //   console.log(jobs[value]);

  if (loading) return <h2>Loading...</h2>;
  return (
    <section className="section ">
      <div className="title">
        <h2>experience</h2>
        <div className="underline"></div>
      </div>
      {/* <Jobs jobs={jobs} /> */}
    </section>
  );
}

export default App;

I have added another state variable currentJob which will assume the job item based on value variable when successfully the fetch is completed, although I would suggest to use the jobs array directly based on your component requirements.