Uncaught TypeError: Cannot destructure property 'workouts'

Question

I am learning reactjs and mern. My application is working just fine. but after i proceeded to add hooks and context to my application. Its throwing an error but i don't know what is causing the error.

my code snippet for Home.js

import React, { useEffect } from "react"

//components
import WorkoutDetails  from '../components/WorkoutDetails'
import WorkoutForm from '../components/WorkoutForm'
import { useWorkoutsContext } from "../hooks/useWorkoutsContext"

const Home = () => {
    const { workouts, dispatch } = useWorkoutsContext()

    useEffect(() => {
        const fetchWorkouts = async () => {
            const response = await fetch('/api/workouts')
            const json = await response.json()

            if(response.ok) {
               dispatch({type: 'SET_WORKOUTS', payload: json})
            }
        }

        fetchWorkouts()
    }, [dispatch])

    return (
        <div className="home">
            <div className='workouts'>
                {workouts && workouts.map((workout) => (
                   <WorkoutDetails key={workout._id} workout={workout} />
                ))}
            </div>
            <WorkoutForm/>
        </div>
    )
}

export default Home

my useWorkoutsContext.js

import { WorkoutsContext } from "../context/WorkoutsContext"
import { useContext } from "react"

export const useWorkoutsContext = () => {
    const context = useContext(WorkoutsContext)

    if(!context) {
        throw Error('useWorkoutsContext must be used inside an WorkoutcontextProvider')
    }
}

Any help for this error would be highly appreciated.

I was trying to display my data on the frontend using contexts and hooks.

Answer 1

Just return context at the end :

export function useWorkoutsContext() {
  const context = useContext(WorkoutsContext);
  if (context === undefined) {
    throw new Error('useWorkoutsContext must be used within a WorkoutcontextProvider');
  }
  return context;
}