شرح صفوف ومحتوى الفقرة
حتى عندما يحمل الحقل النوع type="number" أو شريط تمرير type="range"، فإن المتصفح يعيد قيمة e.target.value دائماً كسلسلة نصية! فجمع seats + 1 حين تكون القيمة النصية "3" ينتج دمجاً نصياً "31" بدلاً من الرقم 4.
حوّل القيمة صراحةً داخل معالج التغيير عبر دالة Number(e.target.value) قبل إجراء أي حسابات للأسعار أو الكميات.
HTML
function TeamCalculator() {
const [seats, setSeats] = useState(5);
const sync = (e) => setSeats(Number(e.target.value));
return (
<div>
<input type="range" min={1} max={20}
value={seats} onChange={sync} />
<p>{seats} seats = ${seats * 15}/mo</p>
</div>
);
}