title: React: Uncaught TypeError: Cannot read properties of undefined (reading 'recipe_name')
body: <p>Just wondering what is going wrong here (I am new to react). My fetch request works and brings in data from backend when the user makes a query in <code>input</code>. But now I receive this error.</p>
  <pre><code>RecipeDBTest.jsx:54 Uncaught TypeError: Cannot read properties of undefined (reading 'recipe_name')
      at GetRecipe (RecipeDBTest.jsx:54:1)
      at renderWithHooks (react-dom.development.js:16175:1)
      at mountIndeterminateComponent (react-dom.development.js:20913:1)
      at beginWork (react-dom.development.js:22416:1)
      at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
      at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
      at invokeGuardedCallback (react-dom.development.js:4274:1)
      at beginWork$1 (react-dom.development.js:27405:1)
      at performUnitOfWork (react-dom.development.js:26513:1)
      at workLoopSync (react-dom.development.js:26422:1)
  </code></pre>
  <p>This is the relevant React component's code:</p>
  <pre><code>import './RecipeForm.css'
  import React, { useState } from 'react'
  import PageContainer from '../components/ui/PageContainer.js'
  
  export default function GetRecipe() {
    const [name, setName] = useState('')
    const [recipeInfo, setRecipeInfo] = useState('')
  
    const retrieveRecipe = function (e) {
      e.preventDefault()
      console.log(name)
      fetch(`http://localhost:3001/getjoinedrecipes/?name=${name}`, {
        method: 'GET',
        headers: { 'Content-type': 'application/json' },
      })
        .then((resp) =&gt; resp.json())
        .then((json) =&gt; {
          console.log(json)
          let result = json.map((row, idx) =&gt; {
            return &lt;span key={idx}&gt;{row}&lt;/span&gt;
          })
          setRecipeInfo(result)
        })
    }
  
    return (
      &lt;div&gt;
        &lt;div className=&quot;recipe-form-container&quot;&gt;
          &lt;form className=&quot;recipe-form&quot;&gt;
            &lt;div className=&quot;page-header&quot;&gt;
              &lt;h1&gt;Get Recipe!&lt;/h1&gt;
            &lt;/div&gt;
            &lt;div className=&quot;recipe-title recipe-element&quot;&gt;
              &lt;label&gt;Recipe Name&lt;/label&gt;
              &lt;input
                type=&quot;text&quot;
                value={name}
                onChange={(e) =&gt; setName(e.target.value)}&gt;&lt;/input&gt;
            &lt;/div&gt;
  
            &lt;div className=&quot;get-button-container&quot;&gt;
              &lt;button className=&quot;get-recipe&quot; onClick={(e) =&gt; retrieveRecipe(e)}&gt;
                Get Recipe
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;PageContainer
          RecipeName={recipeInfo[0].recipe_name}
        /&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>Is this something to do with state? I don't fully understand how it is going wrong, as it works when I remove the <code>&lt;PageContainer&gt;</code> and <code>RecipeName</code> prop. Here is the returned data from the fetch call:</p>
  <pre><code>(3) [{…}, {…}, {…}]
  0:
  id: 11
  ingredient_id: 11
  ingredient_name: &quot;lemon&quot;
  measure: &quot;cups&quot;
  quantity: &quot;2&quot;
  recipe_blurb: &quot;Delicious&quot;
  recipe_id: 6
  recipe_name: &quot;Bolognese&quot;
  </code></pre>