Nie dostaję żadnego błedu a Card i tak się nie renderuje nie wiem dlaczego
Funkcja wysyłając dane do innego pliku po kliknięciu submit
<form className="Card-inputs" onSubmit={SendtoStorage}>
export const StoreProperties = React.createContext(null);
const SendtoStorage = (event) => {
window.localStorage.setItem(`@${props1.key}`, JSON.stringify(props1));
setCount((count) => (count = 1));
<StoreProperties.Provider value={props1}> </StoreProperties.Provider>;
setProps(
(props1) =>
(props1 = {
key: "",
image: "",
country: "",
title: "",
cost: "",
})
);
event.preventDefault();
};
kod renderujący kartę
import { useEffect, useState } from "react";
import { StoreProperties } from "./AddCard";
export default function CardData({ RenderingComponent }) {
const [storageStuff, setStorageStuff] = useState([]);
useEffect(() => {
// const onStorage = () => {
// Object.entries(localStorage).map(([valueJSON]) => {
// const valueStorage = JSON.parse(valueJSON);
// console.log("valueJSON:", valueJSON, " /valueStorage:", valueStorage);
// setStorageStuff((prevStorageStuff) => [...prevStorageStuff, valueStorage]);
// return console.log(storageStuff);
// });
// };
// window.addEventListener("storage", onStorage);
// return () => window.removeEventListener("storage", onStorage); cleanup hook
setStorageStuff((prevStorageStuff) => [...prevStorageStuff, StoreProperties]);
}, []);
return storageStuff.map((item) => {
return <RenderingComponent key="{item.key}" Image={item.image} Country={item.country} Title={item.title} Cost={item.cost} />;
});
}
App.js
import Card from "./components/Card";
import CardData from "./components/CardData";
<div>
<Card Image={Pic} Country="France" Title="Life lessons with Katie Zaferes" Cost={150} />
<CardData RenderingComponent={Card} />
</div>
