I have react native application. And i try to call a property from a component from a api context component.
But I get this error:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `CellRenderer`.
So of course I googled this error. And it has to do with missing to import the correct component. But
So this is the context component:
import { createContext, useEffect, useState } from "react";
import { fetchCategoryData } from "./category.service";
export const CategoryContext = createContext();
export const CategoryContextProvider = ({ children }) => {
const [categoryList, setCategoryList] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const retrieveCategories = () => {
setLoading(true);
setTimeout(() => {
fetchCategoryData()
.then((results) => {
setLoading(false);
setCategoryList(results);
})
.catch((err) => {
setLoading(false);
setError(err);
});
}, 200);
};
useEffect(() => {
retrieveCategories();
}, []);
console.log("NICE CATEGORY", categoryList);
return (
<CategoryContext.Provider
value={{
categoryList,
loading,
error,
}}>
{children}
</CategoryContext.Provider>
);
};
and this is the component that calls the categoryList from context:
/* eslint-disable prettier/prettier */
import { FlatList, SafeAreaView, StatusBar } from "react-native";
import React, { useContext } from "react";
import { AnimalInfoCard } from "../components/category-info-card.component";
import { CategoryContext } from "../../../services/category/category.context";
import { Searchbar } from "react-native-paper";
import { Spacer } from "../../../components/spacer/spacer.component";
import styled from "styled-components/native";
const SafeArea = styled(SafeAreaView)`
flex: 1;
${StatusBar.currentHeight && `margin-top: ${StatusBar.currentHeight}px`};
`;
const SearchContainer = styled.View`
padding: ${(props) => props.theme.space[3]};
`;
const CategoryList = styled(FlatList).attrs({
contentContainerStyle: {
padding: 16,
},
})``;
export const CategoryScreen = () => {
const { categoryList } = useContext(CategoryContext);
return (
<SafeArea>
<SearchContainer>
<Searchbar />
</SearchContainer>
<CategoryList
data={categoryList}
renderItem={() => (
<Spacer position="bottom" size="large">
<AnimalInfoCard />
</Spacer>
)}
keyExtractor={(item) => item.name}
/>
</SafeArea>
);
};
So it is about this line:
const { categoryList } = useContext(CategoryContext);
But as you see I import the context:
import { CategoryContext } from "../../../services/category/category.context";
And for example if I do:
const { categoryListTest } = useContext(CategoryContext);
And of course data=data={categoryListTest}
Then there is no error. And the data from the backend is displayed.
Question: how to fix the error:
Error: Element type is invalid: expected a string (for built-in components)