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}>
∨
</button>
<button className="product--edit" onClick={edit}>
✎
</button>
<button className="product--delete" onClick={del}>
✘
</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;