Hi everyone, I’m struggling with the step on this project that involves an alert being displayed when the user submits their order. When I submit, the form gets cleared but no alert is dispayed with the message and order. There’s no walk through for it and I couldn’t find any references to this project in other posts so any pointers would be great! Here is the link to the project https://www.codecademy.com/courses/react-101/projects/saucy-tango-food-order-form and here is my code:
import React, { useState } from "react";
function FoodOrderForm() {
const [name, setName] = useState("");
const [phone, setPhone] = useState("");
const [address, setAddress] = useState("");
const [order, setOrder] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
return alert(`Order Successful!
Your order was ${order}
Please show your confirmation number for pickup.`);
};
return (
<form>
<label htmlFor="name">Name:</label>
<input
id="name"
value={name}
onChange={(e) => setName(e.target.value)}
name="name"
type="text"
/>
<label htmlFor="phone">Phone:</label>
<input
id="phone"
value={phone}
onChange={(e) => setPhone(e.target.value)}
name="phone"
type="text"
/>
<label htmlFor="address">Address:</label>
<input
id="address"
value={address}
onChange={(e) => setAddress(e.target.value)}
name="address"
type="text"
/>
<label htmlFor="order">Order:</label>
<input
id="order"
value={order}
onChange={(e) => setOrder(e.target.value)}
name="order"
type="text"
/>
<button type="submit" onSubmit={handleSubmit}>
Submit Order
</button>
</form>
);
}
export default FoodOrderForm;
