title: When I run the code below, I am getting this error message: Uncaught TypeError: Cannot read property 'image, label' of undefined
body: <p>When I run the code below, I am getting this error message: Uncaught TypeError: Cannot read property 'image' of undefined.
  Uncaught TypeError: Cannot read property 'label' of undefined.</p>
  
  <p>What am I doing wrong?**</p>
  
  <pre><code>import React, { useState, useEffect, useContext } from "react";
  import { RecipeContext } from "../context/RecipeContext";
  import axios from "axios";
  
  const Details = ({ match }) =&gt; {
  const { query } = useContext(RecipeContext);
  const [foodDetails, setFoodDetails] = useState({});
  
  
  useEffect(() =&gt; {
      const fetchRecipes = async () =&gt; {
        await axios
          .get(
            `https://api.edamam.com/search? 
             q=${query}&amp;app_id=${ID}&amp;app_key=${KEY}&amp;from=0&amp;to=10`
          )
          .then((res) =&gt; {
            const recipe = res.data.hits.find(
              (recipe) =&gt; recipe.recipe.label === match.params.id
            );
            setFoodDetails(recipe);
            console.log(recipe);
          })
          .catch((err) =&gt; console.log(err));
      };
      fetchRecipes();
    }, [query]);
  
        return (
          &lt;div className="container py-5"&gt;
            &lt;div className="row"&gt;
              &lt;div className="col s12 l6"&gt;
      &lt;p&gt;{foodDetails.recipe.label}&lt;/p&gt;
                &lt;img src={foodDetails.recipe.image} alt={foodDetails.recipe.label} /&gt;
  
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        );
      };
      export default Details;
  
  
     `
  </code></pre>