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

React, Bład, Warning

VPS Starter Arubacloud
+1 głos
110 wizyt
pytanie zadane 13 sierpnia 2022 w JavaScript przez ferdynand Obywatel (1,250 p.)

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.

1 odpowiedź

+3 głosów
odpowiedź 13 sierpnia 2022 przez rafal.budzis Szeryf (85,260 p.)
wybrane 13 sierpnia 2022 przez ferdynand
 
Najlepsza

Ok widze błąd ;) Jednak zacznijmy od poprawki w routerze. Obecny sposób wywołania sprawia że wszystkie komponenty renderują się zawsze niezależnie od ścieżki. Warto żeby renderowało się tylko to czego potrzebujesz. zamień obecne 
 

Route path="/" element={<Home />}/>

na 

<Route path="/" render={() => <Home />}/>

lub po prostu przekaż sam komponent bez renderowania go 
 

<Route path="/" render={Home}/>

Jeśli to nie jest react-router to zmień swój router bo jest po prostu głupi że nie zapobiega renderowaniu elementów :)

A co do samego błedu to masz taką linijkę (11 linia)
 

<div data className="h-[400px] w-full">

przekazujesz tam data a to jest to samo co jakbyś napisał data={true} a w HTMLu data to grupa znaczników która przechowuje stringi :) np data-moja-wartosc="abc"

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

komentarz 13 sierpnia 2022 przez ferdynand Obywatel (1,250 p.)
Dzięki za pomoc :)

Podobne pytania

+1 głos
2 odpowiedzi 433 wizyt
pytanie zadane 8 stycznia 2016 w C i C++ przez Damiano Nowicjusz (130 p.)
0 głosów
0 odpowiedzi 92 wizyt
pytanie zadane 7 stycznia 2020 w Bezpieczeństwo, hacking przez ruto Nowicjusz (120 p.)
0 głosów
1 odpowiedź 112 wizyt

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 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!

...