I trying map data which i get using custom hook that recives data from my "storage" (which is actually a class with array of objects and async function to get them) i reciving an error: Cannot read properties of undefined (reading ‘map’).
Code of hook:
const useCreations = () => {
const service = new aboutPisanka();
const [data, setData] = useState();
useEffect(() => {
console.log(123 )
service.getAllCreations().then((data) => setData(data));
}, []);
return data
};
Code of element:
const data = useCreations();
console.log(data);
const cards = data.map((data) => {
const { heading, text, id, image } = data;
return (
<div key={id}>
<img src={require(image)}/>
<h1>{heading}</h1>
<p>{text}</p>
</div>
);
});
Code of function in class where data stores:
getAllCreations = async () => {
return this._creations;
};
(Sorry for my bad english)
As I understand it happens because it maps data before it gets to state but I don’t have any idea how to fix it only making high order componen which will wrap my element.
>Solution :
I do not see your whole code however if you are receiving data in correct format after a while because of Api response,you can add ?
in cards const cards = data?.map((data) => {
to fix that error