Question

Jak zrobić by component wywoływał się po aktywacji funkcji w innym komponencie mówię o tym

Chciałbym aby użytkownik wpisywał wartość do inputów i zapisywać je do localstorage i na tej podstawie została renderowana karta

funkcja w componencie addCard

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

		setCount((count) => (count = 0));
	};

component CardData

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

window.addEventListener("storage", (e) => {
	this.setState({ auth: true });
	Object.entries(localStorage).map(([valueJSON]) => {
		const valueStorage = JSON.parse(valueJSON);

		value = valueStorage;

		props.push(value);
		return props;
	});
});

export default props;

oraz kolejne zapytanie jak zrobić by

<Card />

renderował się znów przy dodaniu wartości do

localstorage

cały kod 

Addcard 

import React, { useState, useRef } from "react";

export default function Addcard() {
	const [count, setCount] = useState(0);
	const [props1, Setprops] = useState({});

	const ref = useRef(null);

	const inputChange = () => {
		Setprops(
			(props1) =>
				(props1 = {
					key: document.querySelector("#input-0").value,
					image: document.querySelector("#input-1").value,
					country: document.querySelector("#input-4").value,
					title: document.querySelector("#input-5").value,
					cost: document.querySelector("#input-6").value,
				})
		);
	};

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

		setCount((count) => (count = 0));
	};

	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">
						<input className="addcard-inputs" id="input-0" ref={ref} onChange={inputChange} placeholder="Name"></input>
						<input className="addcard-inputs" id="input-1" ref={ref} onChange={inputChange} placeholder="Image url"></input>
						<input className="addcard-inputs" id="input-4" ref={ref} onChange={inputChange} placeholder="Country"></input>
						<input className="addcard-inputs" id="input-5" ref={ref} onChange={inputChange} placeholder="Title"></input>
						<input className="addcard-inputs" id="input-6" ref={ref} onChange={inputChange} placeholder="Cost"></input>
						<input type="button" value="Save" onClick={SendtoStorage} className="addcard-inputs-button"></input>
					</form>
				</div>
			)}
		</div>
	);
}

Data card 

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

window.addEventListener("storage", (e) => {
	this.setState({ auth: true });
	Object.entries(localStorage).map(([valueJSON]) => {
		const valueStorage = JSON.parse(valueJSON);

		value = valueStorage;

		props.push(value);
		return props;
	});
});

export default props;

card 

import React, { useState } from "react";

export default function Card(props) {
	const [count, setCount] = useState(0);

	function increment() {
		setCount((count) => count + 1);
	}
	return (
		<div className="Card-container">
			<div className="card-button-img">
				<div className="card-button">
					{count >= 1 ? (
						<div>
							<input className="card-heart crimson-heart" type="button" value="❤️" onClick={increment}></input>
							<span className="card-counter">{count}</span>
						</div>
					) : (
						<input className="card-heart" type="button" value="" onClick={increment}></input>
					)}
				</div>

				<img src={props.Image} className="card-img" alt="bitch" title="image from pexels.com"></img>
			</div>
			<div className="card-description"></div>
			<div className="card-stats">
				<span className="rating-star" title="Rating">
					&#9733;<span>{Math.floor(Math.random() * 50 + 10) / 10}</span>
				</span>

				<span className="card-gray" title="Country">
					{props.Country}
				</span>
				<span className="card-gray" title="Count of reviews post">
					({Math.floor(Math.random() * 150 + 1)})
				</span>
			</div>
			<p className="card-bold" title="Title">
				{props.Title}
			</p>
			<p title="Cost per person">
				<span className="card-bold">From ${props.Cost}</span> / person
			</p>
		</div>
	);
}

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 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>
	);
}

 

Comments

Bardzo dużo widzę przykładów z useEffect co to tak naprawde daję

---

Tak w skrócie, useEffect jest hookiem służącym do tworzenia efektów ubocznych dla komponentów.