Strona nie renderuje nowych kart po kliknięciu submit {react}

Question

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>

 

Comments

Możesz to wystawić na codesandbox.io? Będzie łatwiej przetestować.

---

https://codesandbox.io/embed/goofy-jepsen-88wc9k?fontsize=14&hidenavigation=1&theme=dark

Answer 1

Skoro komponent App jest rodzicem komponentu AddCard (zawiera formularz dodawania karty) i Card (wyświetla kartę), to IMO najprościej będzie współdzielić stan (podnieść go) w App - niech AddCard przyjmuje funkcję, która na submit zostanie wywołana z przekazaniem obiektu karty, a App wtedy zaktualizuje stan swojej tablicy kart i będzie renderować odpowiednią liczbę instancji komponentu Card.

Poprawiony kod: https://codesandbox.io/s/focused-star-xp7xv8?file=/src/App.js

Comments

ok mam jeszcze jeden problem a nawet dwa

pierwszy  ta renderujaca się druga pusta karta oraz jak kilam serdzuszko to wartość się z Random się zmieniają

Do drugie odp zrobić to jako useState?