Jak w inputChange odrazu wpisać wartośc do paragrafów w product

Question

	const inputChange = ({ target }) => {
		const inputId = target.dataset.identity;
		setProduct((product) => ({
			...product,
			[inputId]: target.value,
		}));
	};

chciałbym wpisać wartość odrazu do paragrafów jest to możliwę 

<div className="product">
							<div className="product--style">
								<h4>Porduct 1</h4>
								<button className="product--show" onClick={show}>
									&#8744;
								</button>
								<button className="product--edit" onClick={edit}>
									&#x270E;
								</button>
								<button className="product--delete" onClick={del}>
									&#x2718;
								</button>
								<div className="show-text" ref={productRef}>
									<p>Capmaing Name</p>
									<p>keyword</p>
									<p>Big amount</p>
									<p>Campaing found</p>
									<p>ON/OFF</p>
									<p>Town</p>
									<p>Radius</p>
								</div>
							</div>
						</div>

cały kod

export const StoreProperties = React.createContext(null);
function Navbar() {
	const [random, setRandom] = useState(Math.floor(Math.random() * 50 + 10) / 10);
	// const ref = useRef(null);
	const productRef = useRef(null);
	const [product, setProduct] = useState({
		campaignName: "",
		keywords: "",
		bigAmount: "",
		campaignFound: "",
		onOff: false,
		town: "",
		Radius: "",
	});
	const [option, setOption] = useState(false);
	const contractors = () => {
		setOption(!option);
	};
	const Submit = () => {
		// onCardAdd(product);
		setProduct(
			(product) =>
				(product = {
					campaignName: "",
					keywords: "",
					bigAmount: "",
					campaignFound: random - product.campaignFound.value,
					onOff: false,
					town: "",
					Radius: "",
				})
		);
		<StoreProperties.Provider value={product}> </StoreProperties.Provider>;
		setOption(option);
	};
	const inputChange = ({ target }) => {
		const inputId = target.dataset.identity;
		setProduct((product) => ({
			...product,
			[inputId]: target.value,
		}));
	};
	const show = () => {
		productRef.current.classList.toggle("show-text");
	};
	const del = () => {
		//usuń produkt
	};
	const edit = () => {
		//przypisz value z p do inputów
		setOption(!option);
	};
	return (
		<nav className="navbar">
			<button className="nav-button-contractors" onClick={contractors}>
				Add new Product
			</button>

			{option === true ? (
				<div className="modal">
					<form className="main--form" onSubmit={Submit}>
						<input className="form--input" placeholder="Campaign Name" onChange={inputChange} value={product.campaignName} data-identity="campaignName" required></input>
						<input className="form--input" placeholder="Keywords" onChange={inputChange} value={product.keywords} data-identity="keywords" required></input>
						<input className="form--input" placeholder="Big amount" onChange={inputChange} value={product.bigAmount} data-identity="bigAmount" min="1" max="10000" required></input>
						<input className="form--input" placeholder="Campaing found" onChange={inputChange} value={product.campaignFound} data-identity="campaignFound" required></input>
						<label>Status On</label>
						<input type="checkbox" onChange={inputChange} value={product.onOff} data-identity="onOff" required></input>
						<select className="form--input" onChange={inputChange} value={product.town} data-identity="town" required>
							<option>Cracow</option>
							<option>Warsaw</option>
							<option>Rzeszów</option>
							<option>Gdańsk</option>
						</select>
						<input className="form--input" placeholder="Radius" onChange={inputChange} value={product.Radius} data-identity="radius" required></input>
						<input className="form--input" type="submit" onChange={inputChange} value="Send"></input>
					</form>
				</div>
			) : (
				<div>
					<h1>Products</h1>
					<div className="product--container">
						<div className="product">
							<div className="product--style">
								<h4>Porduct 1</h4>
								<button className="product--show" onClick={show}>
									&#8744;
								</button>
								<button className="product--edit" onClick={edit}>
									&#x270E;
								</button>
								<button className="product--delete" onClick={del}>
									&#x2718;
								</button>
								<div className="show-text" ref={productRef}>
									<p>Capmaing Name</p>
									<p>keyword</p>
									<p>Big amount</p>
									<p>Campaing found</p>
									<p>ON/OFF</p>
									<p>Town</p>
									<p>Radius</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			)}
		</nav>
	);
}

 

Comments

w <p value="product.example"> coś takiego zadziała ?