데이터구조

const coffeeData = {
Starbucks: {
Americano: 4500,
Latte: 5000,
Cappuccino: 5500,
},
BlueBottle: {
Americano: 6000,
Latte: 6500,
Mocha: 7000,
},
Hollys: {
Americano: 4000,
Latte: 4500,
CaramelMacchiato: 5500,
},
};

컴포넌트 구현

import { useState } from "react";
function CoffeePriceApp() {
const coffeeData = {
Starbucks: {
Americano: 4500,
Latte: 5000,
Cappuccino: 5500,
},
BlueBottle: {
Americano: 6000,
Latte: 6500,
Mocha: 7000,
},
Hollys: {
Americano: 4000,
Latte: 4500,
CaramelMacchiato: 5500,
},
};

const [brand, setBrand] = useState("");
const [menu, setMenu] = useState("");
const [price, setPrice] = useState(null);

const handleBrandChange = e => {
    setBrand(e.target.value);
    setMenu(""); // 브랜드 변경 시 메뉴 초기화
    setPrice(null); // 가격 초기화
};

const handleMenuChange = e => {
    setMenu(e.target.value);
    setPrice(coffeeData[brand]?.[e.target.value] || null); // 가격 설정
};

return (
    <div>
        <h1>커피 메뉴 가격 조회</h1>
        <div>
            <label>
                브랜드:
                <select value={brand} onChange={handleBrandChange}>
                    <option value="">선택하세요</option>
                    {Object.keys(coffeeData).map(brand => (
                        <option key={brand} value={brand}>
                            {brand}
                        </option>
                    ))}
                </select>
            </label>
        </div>
        {brand && (
            <div>
                <label>
                    메뉴:
                    <select value={menu} onChange={handleMenuChange}>
                        <option value="">선택하세요</option>
                        {Object.keys(coffeeData[brand]).map(menu => (
                            <option key={menu} value={menu}>
                                {menu}
                            </option>
                        ))}
                    </select>
                </label>
            </div>
        )}
        {price !== null && (
            <h2>
                {brand} {menu}의 가격은 {price}원입니다.
            </h2>
        )}
    </div>
);  }
    export default CoffeePriceApp;