Saucy Tango Food Order Form

Hey Guys,

Having trouble seeing where I went wrong here. I can’t get the alert to trigger.

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(
      `Your order was successful!

      Your order was ${order}.
      
      Please shoe your confirmation number for pickup.`
    );
  );

  return (
  <>
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name: </label>
        <input 
        id="name" 
        name="name" 
        type="text" 
        value={name}
        onChange={(e) => setName(e.target.value)}
        />
      <br/>
      <label htmlFor="phone">Phone: </label>
        <input 
        id="phone" 
        name="phone" 
        type="text" 
        value={phone}
        onChange={(e) => setPhone(e.target.value)}
        />
      <br/>
      <label htmlFor="address">Address: </label>
        <input 
        id="address" 
        name="address" 
        type="text" 
        value={address} 
        onChange={(e) => setAddress(e.target.value)}
        />
      <br/>
      <label htmlFor="order">Order: </label>
        <input 
        id="order" 
        name="order" 
        type="text" 
        value={order} 
        onChange={(e) => setOrder(e.target.value)}
        />
      <br/>
      <button type="submit">Submit Order</button>
    </form>
  </>
  )
};

export default FoodOrderForm;

You closed your handleSubmit function with a parenthesis    )    instead of a curly brace    }   

1 Like