Edamam fetch

gistfile1.txt

// our api you can find on : https://www.edamam.com/
// https://api.edamam.com/api/recipes/v2?type=public&q=chicken&app_id=c9b8432d&app_key=3cef973b112723bd3fe2babe2ebd396e

import { useState, useEffect } from "react";
import axios from "axios";

const App = () => {
  const [recipes, setRecipes] = useState([]);
  const [search, setSearch] = useState("beef");

  const API_KEY = process.env.REACT_APP_API_KEY;
  const API = process.env.REACT_APP_API_ID;
  console.log(API);
  const URL = `https://api.edamam.com/api/recipes/v2?type=public&q=${search}&app_id=${API}&app_key=${API_KEY}`; // stick API Id and API key in here

  const fetchData = async () => {
    await axios
      .get(URL)
      .then((response) => {
        setRecipes(response.data.hits);
        
      })
      .catch((error) => console.error(error));
  };

  useEffect(() => {
    fetchData();
  }, []);

  console.log(recipes);

  const handleSubmit = (e) => {
    e.preventDefault();
    fetchData();
  };

  return (
    <div style={{ textAlign: "center" }}>
      <form onSubmit={handleSubmit}>
        <input
          onChange={(event) => {
            setSearch(event.target.value);
          }}
          value={search}
        />
        <button type="submit">search</button>
      </form>

      {recipes.map((recipe, index) => {
        return (
          <div key={index}>
            <h1>{recipe.recipe.label}</h1>
            <img src={recipe.recipe.image} alt={recipe.recipe.label} />
          </div>
        );
      })}
    </div>
  );
};

export default App;