• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Jak zrobić by product wyświetłał się po kliknięciu submita i renderował po każdym wyowałaniu submit

VPS Starter Arubacloud
0 głosów
131 wizyt
pytanie zadane 13 maja 2022 w JavaScript przez chrystian Gaduła (4,780 p.)
zamknięte 13 maja 2022 przez chrystian

Chcę by ten komponent renderował się za każdym razem gdy zostanie kliknięty submit

dostaję bład 

Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
   

funckjca tworząca kompoenent

const invoke = () => {
		return (
			<div className="product">
				<div className="product--style">
					<h4>Product {productNum}</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 {temp.campaignName}</p>
						<p>keyword {temp.keywords}</p>
						<p>Big amount {temp.campaignName}</p>
						<p>Campaing found {random - temp.campaignFound}</p>
						<p>ON/OFF {temp.onOff}</p>
						<p>Town {temp.town}</p>
						<p>Radius {temp.radius}</p>
					</div>
				</div>
			</div>
		);
	};

wyświetlał się po submit 

	const Submit = () => {
		// onCardAdd(product);
		setTemp((temp) => {
			temp = product;
		});

		setProduct(
			(product) =>
				(product = {
					campaignName: "",
					keywords: "",
					bigAmount: "",
					campaignFound: random - product.campaignFound.value,
					onOff: false,
					town: "",
					radius: "",
				})
		);
		setOption(option);
		var today = new Date();
		var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();

		//przypisz value z p do inputów
		console.log("edited" + "product num" + time);
		setOption(!option);

		invoke();
	};

render 

<div className="product--container">{invoke}</div>

cały kod 

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

function Navbar() {
	const [random, setRandom] = useState(Math.floor(Math.random() * 50 + 10) / 10);
	const productRef = useRef(null);
	const [option, setOption] = useState(false);
	const [productNum, setProductNum] = useState(0);
	const [temp, setTemp] = useState({
		campaignName: "",
		keywords: "",
		bigAmount: "",
		campaignFound: "",
		onOff: false,
		town: "",
		Radius: "",
	});
	const [product, setProduct] = useState({
		campaignName: "",
		keywords: "",
		bigAmount: "",
		campaignFound: "",
		onOff: false,
		town: "",
		Radius: "",
	});
	const contractors = () => {
		setOption(!option);
	};
	const Submit = () => {
		// onCardAdd(product);
		setTemp((temp) => {
			temp = product;
		});

		setProduct(
			(product) =>
				(product = {
					campaignName: "",
					keywords: "",
					bigAmount: "",
					campaignFound: random - product.campaignFound.value,
					onOff: false,
					town: "",
					radius: "",
				})
		);
		setOption(option);
		var today = new Date();
		var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();

		//przypisz value z p do inputów
		console.log("edited" + "product num" + time);
		setOption(!option);

		invoke();
	};
	const inputChange = ({ target }) => {
		const inputId = target.dataset.identity;
		setProduct((product) => ({
			...product,
			[inputId]: target.value,
		}));
	};
	const invoke = () => {
		setProductNum((productNum) => productNum++);
		return (
			<div className="product">
				<div className="product--style">
					<h4>Product {productNum} </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 {temp.campaignName}</p>
						<p>keyword {temp.keywords}</p>
						<p>Big amount {temp.campaignName}</p>
						<p>Campaing found {random - temp.campaignFound}</p>
						<p>ON/OFF {temp.onOff}</p>
						<p>Town {temp.town}</p>
						<p>Radius {temp.radius}</p>
					</div>
				</div>
			</div>
		);
	};
	const show = () => {
		productRef.current.classList.toggle("show-text");
	};
	const del = () => {
		var today = new Date();
		var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();

		//przypisz value z p do inputów
		console.log("edited " + "product num  " + time);
		setOption(!option);
		//usuń produkt
	};
	const edit = () => {
		var today = new Date();
		var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();

		//przypisz value z p do inputów
		console.log("edited" + "product num " + time);
		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" 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">{invoke}</div>
				</div>
			)}
		</nav>
	);
}

export default Navbar;

 

komentarz zamknięcia: odpowiedz

Podobne pytania

0 głosów
1 odpowiedź 86 wizyt
pytanie zadane 10 maja 2022 w JavaScript przez chrystian Gaduła (4,780 p.)
0 głosów
1 odpowiedź 152 wizyt
pytanie zadane 13 września 2018 w JavaScript przez Apper97 Obywatel (1,380 p.)
0 głosów
0 odpowiedzi 101 wizyt

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...