Dostaję parę błedów i nie wiem jak je rozwiązać {react}

Question

Editt: Pierwszy przy wpisywaniu do inputów // rozwiązany

A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. 

:drugi po submit i nie wyświetla się product  

Form submission canceled because the form is not connected

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

	let Invoke = () => {};
	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: "",
					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 = () => {
			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 inputChange = ({ target }) => {
		const inputId = target.dataset.identity;
		setProduct((product) => ({
			...product,
			[inputId]: target.value,
		}));
	};

	const show = () => {
		productRef.current.classList.toggle("show-text");
	};
	const del = () => {
		var today = new Date();
		var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
		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;

 

Comments

prevenDefult usuwa drugi bład lecz nadal nie towrzy mi nowego produktu

Answer 1

A może użyj czegoś co ułatwi Ci życie z formularzami? Ja polecam tą libkę : https://www.npmjs.com/package/react-hook-form

Dodatkowo na twoim miejscu zaczął bym się użyć HTMLa bo masz braki. Np Znacznik <button> domyślnie jest typu submit. Jeśli chcesz zeby był tylko przyciskiem ustaw typ 

<button type="button" onClick={() => {}}> Przycisk </button>

Nie stosuj <input type="submit" /> Bo nie wszystko Ci się uda wystylizować w ten sposób. Np nie dodasz do środka <inputa ikonki w SVG a w przypadku <button> już możesz.

PS. Invoke zrób jako osobny komponent !!! Nie rób takich cudów jak tutaj ;P 

Aby stworzyć nowy produkt musisz mieć tablicę 

    const [products, setProducts] = useState([]);

wtedy jesteś w stanie dodać coś do niej imieć wiele elementów.

setProducts((products) =>
     ([
        ...products, 
        {
            campaignName: "",
            keywords: "",
            bigAmount: "",
            campaignFound: "",
            onOff: false,
            town: "",
            radius: "",
        }
    ])
);

Moim zdaniem powinieneś cofnać się o jeden krok i poćwiczyć HTMLa i czystego JSa bo w każdym pytaniu brakuje ci podstaw JSa, a problemy nie dotyczą Reacta. 

Comments

Robię to w jednym komponencie bo  projekt jest tak mały wydaje mi się że się nie opłaca

a rozkładając to na komponenty musiał bym tak jak powiedziałeś tworzyć tablice mapować renderComponent a później jeszcze przypinać product do navbara gdzie product container jest już w navbarze

---

I tak musisz tworzyć tablice. Nie da się tego zrobić bez niej.

---

czyli

    const [productStuff, setProductStuff] = [];

//w funckji invoke

setProductStuff((prev) => [...prev, component]);

const component = (

                <div className="product">

                    <div className="product--style">

                        <h4>Product {countED} </h4>

                        <button className="product--show" onClick={productRef.current.classList.toggle("show-text")}>

                            &#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}km</p>

                        </div>

                    </div>

                </div>

            );

{productStuff.map((productStuff) => {

                            return productStuff;

                        })}