React, Apka, Sklep

Question

Witam, 

Tworze apke z tortami i ciastkami na podstronie z tortami mam formualrz do zamowienia w ktorym mam opcje do wybrania tj. ilość porcji, smak  i potrzebuje, aby po wybraniu porcji wyswietlało mi cene. 

W Tablicy z tortami mam :

 {
    id: "0",
    name: "Tort weselny",
    img: "/images/Slodki-stol/tort.jpg",
    about:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, porro",
    portion: [
      { value: "8-9 porcji"},
      { value: "13-15 porcji"},
      { value: "20-23 porcji"},
    ],
    taste: [
      { value: "malinowy" },
      { value: "truskawkowy" },
      { value: "czekoladowy" },
    ],
    price: [
      { value: 550},
      { value: 650},
      { value: 750},
    ],
  },

podstrona z zamowieniem :

import {useState} from "react";
import { useParams } from "react-router-dom";

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)
      console.log(portion)
      setPrice()
    }
    const handleTaste = (e) => {
      setTaste(e.target.value);
      console.log(taste)
    }
  return (
    <>
      <div className="mt-5 self-center md:w-1/3">
        {data
          .filter((cake) => cake.name === name)
          .map((cake, id) => (
            <div key={id}>
              <form onSubmit={(e) => e.preventDefault()} 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ść">Wybierz ilość</option>
                  {cake.portion.map((option, id) => (
                    <option key={id} value={option.value}>
                      {option.value}
                    </option>
                  ))}
                </select>
                <label className="font-bold mt-4">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">Wybierz smak</option>
                  {cake.taste.map((option, id) => (
                    <option key={id} value={option.value}>
                      {option.value}
                    </option>
                  ))}
                </select>
                <label className="mt-4 font-bold">Uwagi do tortu (opcjonalnie)</label>
                <textarea
                  className="mt-1 px-2 py-1.5 border-2 outline-none rounded-md resize-none"
                />
                <div>
                
                  <h3 className="mt-5">Cena:</h3>
                  <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;

Jak wogole jestem w stanie polączyć option.value z price ? cena zależna od wybrania porcji.

Renderuje Cene w momencie wybrania porcji, bardzo proszę Was o pomoc :) 

Pozdrawiam.

Answer 1

Domyślam się, że 3 wersje porcji odpowiadają 3 kolejnym cenom. Rozumiem, że chcesz, aby po wybraniu porcji zaktualizować cenę na odpowiednio wybraną. Bez zmieniania struktury możesz to zrobić poprzez wyszukanie który indeks z tablicy portion zawiera wybraną wartość. Następnie ustawić cenę jako price[znalezionyIndeks]

Comments

Witam ponownie, dzięki za szybką opdowiedż, dopiero teraz mogłem napisac, mialem mała awarie :)

Dziś dopiero przy tym usiadłem i dalej nie do końca wiem jak to zrobić.

Stwierdziłem, że w tablicy portion umieszcze cene przypisana do każdego value tj.

 portion: [

      { value: "8-9 porcji", price: 150.00},

      { value: "13-15 porcji", price: 250.00},

      { value: "20-23 porcji", price: 350.00},

    ],

i czy to bedzie lepsze rozwiązanie, wydaje mi sie, że tak, ale mimo tego dalej nie potrafie tak tego ustawic, aby cena dopiero renderwala sie po wybraniu porcji, generalnie cos jest nie tak z moim zaklutym łbem xD

Gdzies dzwoni, ale nie wiem w którym kościele :P

---

Imo jest krok w dobrym kierunku, ale poprzednie rozwiązanie też nie było jakieś złe.

Nie wiem jak wygląda u ciebie kod w tym drugim podejściu, więc napisze ci możliwe rozwiązania do tego pierwszego.

SPOSÓB 1:

const handlePortion = (e) =>{
  setPortion(e.target.value);
  const cake = data.find(cake=>cake.name===name);
  const portionId = cake.portion.findIndex(p => p===e.target.value);
  const price = cake.price
  setPrice(data.price[portionId])
}

-------------


SPOSÓB 2:
const handlePortion = (e) =>{
  setPortion(e.target.value);
}
useEffect(()=>{
  const cake = data.find(cake=>cake.name===name);
  const portionId = cake.portion.findIndex(p => p===e.target.value);
  const price = cake.price
  setPrice(data.price[portionId])
},[portion])

Może są jakieś literówki, ale idea jest prosta. Drugie rozwiązanie ma taką zaletę że gdy ilość kodu urośnie to będzie wiele takich drobnych useEffect i tylko się dołoży więcej zależności. Updatowanie wszystkiego ręcznie może prowadzić do błędu gdy się czegoś zapomni i niepotrzebnego komplikowania kodu.

---

Dzięki Ci dobry człowieku:) jak znajdę dziś chwilę to spróbuję to wdrożyć. Jeszcze raz dziękuję za pomoc i szybka odpowiedź.