Cannot read property 'map' of undefined error. React Typescript

Question

I have this code here. I keep getting an error:

TypeError: Cannot read property 'map' of undefined.

Here are a few facts:

I get data from the front-end javascript file. So there shouldn't be any async problems.
singleCategory.title Always displays correctly.
The error happens only if I refresh the page. If I comment out the map code and add code. So that React could inject it without refresh. It works. I only get an error if I refresh the page or try to navigate to it.

Why does singleCategory.title display correctly but using map is undefined? Also map is undefined only on refresh. If code is injected it works properly.

const CoursesCategories: React.FC = () => {
    const [singleCategory, setSingleCategory] = useState<CategoriesInterface>([] as any);

    useEffect(() => {
        const fullUrl = window.location.href;
        const segments = new URL(fullUrl).pathname.split('/');
        const id = segments.pop() || segments.pop();

        for (let category of Categories ) {
            if (category.url === id) {
                setSingleCategory(category);
                console.log(singleCategory)
            }
        }
    }, [singleCategory]);


    return (
        <div>
            {
                singleCategory.courses !== [] ? (
                    <div>
                        <CategoryTitle title={singleCategory.title} />

                        <div className={wrapper.headerWrapper}>
                            {
                                singleCategory.courses.map((course: CoursesInterface) => (
                                    <h2 key={course.id}>{course.title}</h2>
                                    )
                                )
                            }
                        </div>
                    </div>
                ) : ''
            }

        </div>
    )
}

Edit 1. If I write like this I get.

Cannot read property 'length' of undefined

{ singleCategory.courses.length > 0 && singleCategory.courses.map((course: CoursesInterface) => (
                                    <h2 key={course.id}>{course.title}</h2>
                                )
                            )}

useEffect runs after the first render so singleCategory is not defined on that render. Generally conditionally render the map and it will render with the fetched data on the second render. — pilchard
– pilchard, Commented Dec 5, 2020 at 12:26
add a conditionnal render to your .map() { singleCategory.courses.length > 0 && singleCategory.course.map(...)} — DarioRega
– DarioRega, Commented Dec 5, 2020 at 12:26

Boussadjra Brahim · Accepted Answer · 2020-12-05 12:37:15Z

2

Since you're using typescript you could use optional chaining :

{ singleCategory.courses?.length > 0
    && singleCategory.courses?.map((course: CoursesInterface) => (
                                    <h2 key={course.id}>{course.title}</h2>
                                )
  )}

because at the first rendering that property is not available.

answered Dec 5, 2020 at 12:37

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot read property 'map' of undefined error. React Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related