Według mnie CardData powinien sam renderować rzeczy ze storage. Może przyjmować komponent, do którego ma przekazać rzeczy do wyrenderowania:
import { useEffect, useState } from "react";
export default function CardData({ RenderingComponent }) {
const [storageStuff, setStorageStuff] = useState([]);
useEffect(() => {
const onStorage = () => {
Object.entries(localStorage).map(([valueJSON]) => {
const valueStorage = JSON.parse(valueJSON);
setStorageStuff((prevStorageStuff) => [...prevStorageStuff, valueStorage]);
});
};
window.addEventListener("storage", onStorage);
return () => window.removeEventListener('storage', onStorage); // cleanup hook
}, []);
return storageStuff.map((item) => (
<RenderingComponent
key={item.key}
Image={item.image}
Country={item.country}
Title={item.title}
Cost={item.cost}
/>;
);
}
import CardData from "./components/CardData";
export default function App() {
return (
<div>
<Card Image={Pic} Country="France" Title="Life lessons with Katie Zaferes" Cost={150} />
<CardData RenderingComponent={Card} />
</div>
);
}
Przy okazji, jeśli podpinasz się pod storage event, to raczej chcesz to robić tylko raz, a nie na każde renderowanie komponentu. Więc do useEffect dobrze jest przekazać pustą tablicę zależności.