text: import React, { useEffect, useState } from "react";
  import Recipe from "./Recipe";
  import "./App.css";
  
  const App = () => {
    // API auth
    const APP_ID = "d3fe2ead";
    const APP_KEY = "62f4a658cef756d9b125eec16d55db17";
  
    // Set states
    const [recipes, setRecipes] = useState([]);
    const [search, setSearch] = useState("");
    const [query, setQuery] = useState("");
  
    // API requests
    useEffect(() => {
      getRecipes();
    }, [query]);
  
    const getRecipes = async () => {
      const response = await fetch(
        `https://api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}`
      );
      const data = await response.json();
      setRecipes(data.hits);
    };
  
    const updateSearch = e => {
      setSearch(e.target.value);
    };
  
    const getSearch = e => {
      e.preventDefault();
      setQuery(search);
      setSearch("");
    };
  
    return (
      <div className="App">
        <span className="titleApp">Recipes Finder!</span>
        <form onSubmit={getSearch} className="search-form">
          <input
            className="search-bar"
            type="text"
            value={search}
            onChange={updateSearch}
          />
          <button className="search-button" type="submit">
            Search
          </button>
        </form>
        <div className="recipes">
          {recipes.map(recipe => (
            <Recipe
              key={recipe.recipe.label}
              title={recipe.recipe.label}
              calories={recipe.recipe.calories}
              image={recipe.recipe.image}
              ingredients={recipe.recipe.ingredients}
            />
          ))}
        </div>
      </div>
    );
  };
  
  export default App;
  