Day 160 of Learning MERN Stack

Hello Dev Community! 👋

It is officially Day 160 of my full-stack engineering journey! Today, I engineered the Checkout / Delivery Information Module (PlaceOrder.jsx) for my food delivery platform, Tomato! 📦🚚💳

Connecting shipping address inputs directly to Stripe hosted checkout sessions requires strict route guards and dynamic state handling. Here is a breakdown of how I structured this workflow today.

---

🛠️ Deconstructing the Day 160 Checkout Engine

As captured in my code editor and active app screens (Screenshots 384, 385, & 386):

1. Unified State for Delivery Information

• Implemented a single onChangeHandler updating controlled inputs (firstName, email, street, phone, etc.) dynamically via object computed property keys:

javascript
  const onChangeHandler = (event) => {
    const name = event.target.name;
    const value = event.target.value;
    setData(data => ({ ...data, [name]: value }));
  }; const [data, setData] = useState({
  firstName: "", lastName: "", email: "", street: "",
  city: "", state: "", zipcode: "", country: "", phone: ""
});

const onChangeHandler = (event) => {
  const name = event.target.name;
  const value = event.target.value;
  setData(data => ({ ...data, [name]: value })); useEffect(() => {
  if (!token) {
    navigate('/cart');
  } else if (getTotalCartAmount() === 0) {
    navigate('/cart');
  }
}, [token]);
};