Question

Co zrobić my nowa kartka renderowała się za każdym razem gdy to localstorage wchodzi nowa wartość i usuwała się gdy  wychodzi

Edit: dostaje błąd 

Each child in a list should have a unique "key" prop.

moja app

 

import React from "react";
import Card from "./components/Card";
import Addcard from "./components/AddCard";
import Pic from "./img/cards/pexels-merve-şahin-11161043.jpg";
import data from "./components/CardData";
export default function App() {
	const cards = data.map((item) => {
		return <Card key={item.key} Image={item.image} Country={item.country} Title={item.title} Cost={item.cost} />;
	});

	return (
		<div>
			
			<Card Image={Pic} Country="France" Title="Life lessons with Katie Zaferes" Cost={150} />
			{cards}
			<Addcard />
			
		</div>
	);
}

add card 

import React, { useState } from "react";

export default function Addcard() {
	const [count, setCount] = useState(0);
	const [props1, setProps] = useState({
		key: "",
		image: "",
		country: "",
		title: "",
		cost: "",
	});

	const inputChange = ({ target }) => {
		const inputIdentity = target.dataset.identity;
		setProps((props1) => ({ ...props1, [inputIdentity]: target.value }));
	};

	const SendtoStorage = (event) => {
		window.localStorage.setItem(`@${props1.key}`, JSON.stringify(props1));

		setCount((count) => (count = 0));
		setProps(
			(props1) =>
				(props1 = {
					key: "",
					image: "",
					country: "",
					title: "",
					cost: "",
				})
		);
		event.preventDefault();
	};

	const plus = () => {
		setCount((count) => (count = 1));
	};

	return (
		<div className="Card-container Card-container-add">
			{count === 0 ? (
				<div className="Card-arrows">
					<span className="arrow-n-e">&#8598; </span>
					<span className="arrow-n-w"> &#8599; </span>
					<button className="addcard-button" onClick={plus}>
						+
					</button>
					<span className="arrow-s-e">&#8600; </span>
					<span className="arrow-s-w"> &#8601;</span>
				</div>
			) : (
				<div>
					<form className="Card-inputs" onSubmit={SendtoStorage}>
						<input className="addcard-inputs" id="input-0" onChange={inputChange} value={props1.key} placeholder="Name" data-identity="key"></input>
						<input className="addcard-inputs" id="input-1" onChange={inputChange} value={props1.image} placeholder="Image url" data-identity="image"></input>
						<input className="addcard-inputs" id="input-4" onChange={inputChange} value={props1.country} placeholder="Country" data-identity="country"></input>
						<input className="addcard-inputs" id="input-5" onChange={inputChange} value={props1.title} placeholder="Title" data-identity="title"></input>
						<input className="addcard-inputs" id="input-6" onChange={inputChange} value={props1.cost} placeholder="Cost" data-identity="cost"></input>
						<input type="submit" value="Save" className="addcard-inputs-button"></input>
					</form>
				</div>
			)}
		</div>
	);
}

const props = [];
let value = {};

window.addEventListener("storage", () => {
	Object.entries(localStorage).map(([valueJSON]) => {
		const valueStorage = JSON.parse(valueJSON);

		value = valueStorage;

	
		return console.log(props);
	});
});
 props.push(value);
export default props;

 

Comments

Event "storage" działa tylko dla pozostałych zakładek. W ten samej karcie w której ustawiłeś wartość nie otrzymasz tego eventu. Może to twój problem?

PS. Nie możesz robić sobie tablicy bez użycia stanu jeśli chcesz ją wyświetlać.

---

Stan to znaczy to co jest w linku dobrze rozumiem?

 

Nie możesz robić sobie tablicy bez użycia stanu jeśli chcesz ją wyświetlać.

 

Stan

---

Czyli co pierwszą nadpisać stałymi danymi a dopiero kolejne pobierać dane z storage?