昨天我們完成了「新增用藥」的表單介面。今天我們要為這個表單注入靈魂，讓按鈕真正發揮作用。但在這之前，我們必須先弄懂 React 開發中非常重要的一個核心觀念：「狀態提升 (Lifting State Up)」。

同時，我也會分享今天在實作過程中遇到的一個「白畫面崩潰」真實踩坑紀錄，希望能幫大家避開這個常見的新手陷阱！

一、 觀念解析：為什麼要「狀態提升」？

目前我們的 medications (用藥資料陣列) 是存放在下方的 MedicationList 元件裡面的。但是，上方的 AddMedicationForm 表單也需要把新資料加進這個清單中。

為了解決「兩個不同的元件需要共用同一份資料」的問題，我們必須把狀態往上移動到它們共同的父元件——也就是 App.jsx 之中。

【關鍵程式碼實作】
打開 src/App.jsx，我們將原本在清單裡的狀態「提升」到最上層，並透過 Props 把更新函數 (setMedications) 往下傳遞給表單，讓元件之間可以順利溝通：

AddMedication是今天的重點可以把我們新增的藥在我們按下確認後出現在下方畫面

二、 完成表單送出功能
我們接著打開 src/components/AddMedicationForm.jsx，加入 useState 來綁定輸入框的值，並實作 handleSubmit 來處理資料新增：

以下是成功畫面