Back

Version 7

12/2/2024
/** @jsxImportSource https://esm.sh/react */
import React, { useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";

function App() {
const [numPeople, setNumPeople] = useState(4);
const [numRecipes, setNumRecipes] = useState(1);
const [difficulty, setDifficulty] = useState("easy");
const [ingredients, setIngredients] = useState("");
const [recipes, setRecipes] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");

const handleSubmit = async (e) => {
e.preventDefault();
setLoading(true);
setError("");
try {
const response = await fetch("/recipes", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ numPeople, numRecipes, difficulty, ingredients }),
});
const data = await response.json();
if (data.error) {
setError(data.error);
} else {
setRecipes(data.recipes);
}
} catch (err) {
setError("An error occurred while fetching recipes. Please try again.");
} finally {
setLoading(false);
}
};

karkowg-lazycook.web.val.run
Updated: December 4, 2024