• 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

0 głosów
20 wizyt
pytanie zadane 6 dni temu w JavaScript przez chrystian Gaduła (3,970 p.)
zamknięte 6 dni temu 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ź 31 wizyt
0 głosów
1 odpowiedź 105 wizyt
pytanie zadane 13 września 2018 w JavaScript przez Apper97 Obywatel (1,380 p.)
0 głosów
0 odpowiedzi 33 wizyt

87,940 zapytań

136,519 odpowiedzi

304,383 komentarzy

58,305 pasjonatów

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...