Need Help With ReactJS Error

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:

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?

Shouldn’t ItemCtx be the provider?

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

@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`

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.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.