Need Help With ReactJS Error

[SaiCharan21]

If someone could help me, that would be great!

REPOSITORY LINK: Link

Here are the files of code followed by the error:

Home.js:

import React, { useContext } from "react";
import { Link } from "react-router-dom";
import { ItemContext } from "../context/items";
import Hero from "../components/Hero";

const Home = () => {
  const ItemCtx = useContext(ItemContext);

    return (
        <ItemCtx>
            {(value) => {
                return (
                    <>
                        <Hero/>
                        {console.log(value)}
                        <section className="featured">
                            <header className="featured-head">
                                <h3>Featured Collection</h3>
                            </header>
                            <div className="item featured-list">
                                {ItemCtx.map(({id, image, product_name}) => (
                                    <article key={id} className="item featured-item">
                                        <div className="item-image">
                                            <img src={image} alt={product_name}/>
                                        </div>
                                        <Link to={`items/${id}`} className="btn item-link">Details</Link>
                                    </article>
                                ))}
                            </div>
                        </section>
                    </>
                )
            }}
        </ItemCtx>
    )
}

export default Home;

ItemContext.js:

import React, {useEffect, useState} from "react";
import {API, graphqlOperation} from "aws-amplify";
import {v4 as uuidv4} from "uuid";
import {listItems} from "../graphql/queries";
import {processOrder} from "../graphql/mutations";

const ItemContext = React.createContext();

const ItemProvider = ({children}) => {
    const [items, setItems] = useState([]);
    const [featured, setFeatured] = useState([]);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        fetchItems();
    }, []);

    const checkout = async (orderDetails) => {
        const payload = {
            id: uuidv4(),
            ...orderDetails
        };
        try {
            await API.graphql(graphqlOperation(processOrder, {input: payload}));
            console.log("Order is successful");
        } catch (err) {
            console.log(err);
        }
    };

    const fetchItems = async () => {
        try {
            setLoading(true);
            // Switch authMode to API_KEY for public access
            const {data} = await API.graphql({
                query: listItems,
                authMode: "API_KEY"
            });
            const items = data.listItems.items;
            const featured = items.filter((item) => {
                return !!item.featured;
            });
            setItems(items);
            setFeatured(featured);
            setLoading(false);
        } catch (err) {
            console.log(err);
        }
    };

    return (
        <ItemContext.Provider value={{items, featured, loading, checkout}}>
            {children}
        </ItemContext.Provider>
    );
};

export {ItemContext, ItemProvider};

Here is the error:

[kevinSmith]

Usually when I see this error it means that I imported or exported some component incorrectly. It’s telling you that something is undefined.

If inside the component, you log out ItemCtx and Hero, what do you get?

[lasjorg]

Shouldn’t ItemCtx be the provider?

I don’t have much experience with Context so I might be wrong.

[SaiCharan21]

@kevinSmith, I want to begin by thanking you for taking the time to check my topic that I posted and offering a solution.

To your question, I am not getting anything in return because I get that error on the page.
And I have also checked my other components and files.
If you could help me fix this error, that would be great…
Here is a code sandbox: CodeSandbox`

[kevinSmith]

Well, I added this:

const Home = () => {
  const ItemCtx = useContext(ItemContext);
  console.log("asdf1", ItemCtx);
  console.log("asdf2", Hero);
  // ...

I get this:

asdf1 undefined
asdf2 ƒ Hero() {return // … other valid component stuff

This is what I was suggesting you do. This tells us that your context is undefined. And as lasjorg suggests, I don’t think you’re applying your context correctly.