import { useState } from "react";
 
const initialFoods = [
  { name: "egg", id: 1 },
  { name: "beef", id: 2 },
  { name: "mutton", id: 3 },
];
 
export default function FoodList() {
  const [foods, setFoods] = useState(initialFoods);
  const [selectedItem, setSelectedItem] = useState(foods[0]);
 
  function handleItemChange(e, id) {
    const updatedFoods = foods.map((food) =>
      food.id === id ? { ...food, name: e.target.value } : food
    );
    setFoods(updatedFoods);
  }
 
  return (
    <div>
      <ul>
        {foods?.map((food) => (
          <div key={food?.id}>
            <input
              className="mt-2 border border-gray-300 rounded-lg focus:outline-none"
              value={food?.name}
              onChange={(e) => {
                handleItemChange(e, food?.id);
              }}
            />
            <button
              onClick={() => {
                setSelectedItem(food);
              }}
            >
              Choose
            </button>
          </div>
        ))}
      </ul>
      You Choose: {selectedItem?.name}
    </div>
  );
}