Dobry wieczór,
Wczoraj zauważyłem, że w konsoli pojawia mi sie taki błąd :
Warning: Received `true` for a non-boolean attribute `data`
juz nie za bardzo wiem co moge zrobic, zeby ten błąd sie nie pojawiał. Dwa dni spedzilem przy tym i dalej lipa.
const cakesForWeedings = [
{
id: "0",
name: "Tort weselny",
img: "/images/Slodki-stol/tort.jpg",
about:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, porro",
portion: [
{ value: "Wybierz ilość", price: ""},
{ value: "8-9 porcji", price: "Cena: 300 zł"},
{ value: "13-15 porcji", price: "Cena: 500 zł"},
{ value: "20-23 porcji", price: "Cena: 700 zł"},
],
taste: [
{ value: "Wybierz smak" },
{ value: "malinowy" },
{ value: "truskawkowy" },
{ value: "czekoladowy" },
],
},
{
id: "1",
name: "Torcik weselny",
img: "/images/Torty/tort-jesien.jpg",
about:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus reprehenderit exercitationem eligendi vel, quo ut in. Quisquam est repudiandae ad",
portion: [
{ value: "Wybierz ilość", price: ""},
{ value: "5-8 porcji", price: "Cena: 200 zł"},
{ value: "10-15 porcji", price: "Cena: 300 zł"},
{ value: "20-23 porcji", price: "Cena: 400 zł"},
],
taste: [
{ value: "Wybierz smak" },
{ value: "bananowy" },
{ value: "truskawkowy" },
{ value: "waniliowy" },
],
},
];
function App() {
return (
<div>
<Routes>
<Route path="/" element={<Home />}/>
<Route
path="/torty-weselne"
element={<WeddingCakes data={cakesForWeedings} />}
/>
<Route path="/torty-urodzinowe" element={<BirthdayCakes />} />
<Route path="/torty-okolicznosciowe" element={<OccasionalCakes />} />
<Route path="/ciastka" element={<Sweets />} />
<Route
path="tort/:name"
element={<OrderCake data={cakesForWeedings} />}
/>
<Route
path="*" element={<Navigate to="/"/>}
/>
</Routes>
</div>
);
}
export default App;
function Offer() {
return (
<div className="mt-24 md:mt-28" id="offer">
<div className="space-y-3 px-5 md:w-1/2">
<h3 className="text-4xl lg:text-5xl text-slate-500">Oferta</h3>
<p className="text-slate-500">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda laboriosam obcaecati molestias minima voluptatum ipsa! Perferendis impedit repellendus natus asperiores tempore, ea non dignissimos minus, voluptatibus qui eos ut et!</p>
</div>
{/* torty weselne */}
<div className="sm:grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 px-5 gap-5">
<div className="mt-16 max-w-[400px]">
<div data className="h-[400px] w-full">
<img className="object-cover w-full h-full" src="images/Slodki-stol/tort.jpg" alt="/"/>
</div>
<h4 className="text-slate-600 text-xl mt-1 uppercase">Torty weselne</h4>
<p className="text-slate-500 mt-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex et obcaecati temporibus quisquam molestiae ipsam alias doloremque est possimus repudiandae?</p>
<Link to="/torty-weselne"><button className="text-slate-600 uppercase mt-5 border-2 border-orange-100 p-2 px-10 hover:bg-orange-200 hover:text-white hover:duration-200 hover:ease-in">Zobacz...</button></Link>
</div>
{/* torty urodzinowe*/}
<div className="mt-16 max-w-[400px]">
<div className="h-[400px] w-full">
<img className="object-cover w-full h-full" src="images/Torty/tort-harry.jpg" alt="/" />
</div>
<h4 className="text-slate-600 text-xl mt-1 uppercase">Torty urodzinowe</h4>
<p className="text-slate-500 mt-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex et obcaecati temporibus quisquam molestiae ipsam alias doloremque est possimus repudiandae?</p>
<Link to="/torty-urodzinowe"><button className="text-slate-600 uppercase mt-5 border-2 border-orange-100 p-2 px-10 hover:bg-orange-200 hover:text-white hover:duration-200 hover:ease-in">Zobacz...</button></Link>
</div>
{/* torty okolicznościowe */}
<div className="mt-16 max-w-[400px]">
<div className="h-[400px] w-full">
<img className="object-cover w-full h-full" src="images/Torty/tort-komunia-2.jpg" alt="/" />
</div>
<h4 className="text-slate-600 text-xl mt-1 uppercase">Torty okolicznościowe</h4>
<p className="text-slate-500 mt-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex et obcaecati temporibus quisquam molestiae ipsam alias doloremque est possimus repudiandae?</p>
<Link to="/torty-okolicznosciowe"><button className="text-slate-600 uppercase mt-5 border-2 border-orange-100 p-2 px-10 hover:bg-orange-200 hover:text-white hover:duration-200 hover:ease-in">Zobacz...</button></Link>
</div>
{/* ciastka */}
<div className="mt-16 max-w-[400px]">
<div className="h-[400px] w-full">
<img className="object-cover w-full h-full" src="images/Inne/ciastka-delicje-kolor.jpg" alt="/" />
</div>
<h4 className="text-slate-600 text-xl mt-1 uppercase">Ciastka</h4>
<p className="text-slate-500 mt-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex et obcaecati temporibus quisquam molestiae ipsam alias doloremque est possimus repudiandae?</p>
<Link to="/ciastka"><button className="text-slate-600 uppercase mt-5 border-2 border-orange-100 p-2 px-10 hover:bg-orange-200 hover:text-white hover:duration-200 hover:ease-in">Zobacz...</button></Link>
</div>
</div>
</div>
);
}
export default Offer;
function OrderForm({ data }) {
const { name } = useParams();
const [portion, setPortion] = useState("Wybierz ilość");
const [taste, setTaste] = useState("Wybierz smak")
const [price, setPrice] = useState("");
const handlePortion = (e) => {
setPortion(e.target.value);
const cake = data.find(cake => cake.name === name);
const cakePrts = cake.portion;
const portionsIndex = cakePrts.findIndex(prts => prts.value === e.target.value);
const cakePrice = cakePrts[portionsIndex].price;
setPrice(cakePrice);
}
const handleTaste = (e) => {
setTaste(e.target.value);
}
const handleSubmit = (e) => {
e.preventDefault();
if (portion === "Wybierz ilość") {
alert('Wybierz ilość porcji !');
}
if (taste === "Wybierz smak") {
alert('Wybierz smak !')
}
if (portion !== "Wybierz ilość" && taste !== "Wybierz smak") {
alert('Gratulacje ! Twój tort został zamówiony')
setPortion("Wybierz ilość");
setTaste("Wybierz smak");
setPrice("");
}
}
return (
<>
<div className="mt-5 self-center md:w-1/3">
{data
.filter((cake) => cake.name === name)
.map((cake, id) => (
<div key={id} className="max-w-[500px]">
<form onSubmit={handleSubmit} className="flex flex-col">
<label className="font-bold">Ilość porcji :</label>
<select onChange={handlePortion} value={portion} className="mt-1 px-2 py-1.5 border-2 outline-none rounded-md">
{/* <option value="">Wybierz ilość</option> */}
{cake.portion.map((option, id) => (
<option key={id} value={option.value}>
{option.value}
</option>
))}
</select>
<div>
</div>
<label className="font-bold mt-5">Wybierz smak :</label>
<select onChange={handleTaste} value={taste} className="mt-1 px-2 py-1.5 border-2 outline-none rounded-md">
{/* <option value="">Wybierz smak</option> */}
{cake.taste.map((option, id) => (
<option key={id} value={option.value}>
{option.value}
</option>
))}
</select>
<label className="mt-5 font-bold">Uwagi do tortu (opcjonalnie)</label>
<textarea
className="mt-1 px-2 py-1.5 border-2 outline-none rounded-md resize-none"
/>
<h3 className="mt-5 font-bold" value={price}>{price}</h3>
<div>
<button
className='md:mt-10 mt-5 bg-white border-2 border-slate-100 p-2 px-10 hover:bg-orange-200 hover:text-white hover:duration-200 hover:ease-in"'
type="submit"
>
Złóż zamówienie
</button>
</div>
</form>
</div>
))}
</div>
</>
);
}
export default OrderForm;
Już nie wiem, gdzie mam zlokalizować ten bład ...
Kiedy zakomentuje Offer, tak, aby komponent nie został wyświetlany to bład znika.
Prosze o jakies wskazówki.
