title: Error when I was trying to render a map of items
body: <p>I am trying to figure out where my error is in my react js page</p>
  
  <p>I have tried different things like changing it into a state component, return and render statements, etc. But its still giving me </p>
  
  <blockquote>
    <p>"TypeError: Cannot read property 'map' of undefined
    Recipes
    src/components/Recipes.js:4
      1 | import React from "react";
      2 | 
      3 | const Recipes = (props) => (
    4 |     
      5 |      { props.recipes.map((recipe)=> {
      6 |         return (
      7 |         
    View compiled"</p>
  </blockquote>
  
  <p>App.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  import InputForm from "./components/InputForm";
  import Recipes from "./components/Recipes"
  
  const API_KEY= "mykey";
  
  class App extends Component {
  
    state= {
      recipes: []
    }
  
    getRecipe  = async (e) =&gt; {
    e.preventDefault();
    const recipeName = e.target.elements.recipename.value;
    const api_call = await fetch(`https://www.food2fork.com/api/search?key=${API_KEY}&amp;q=${recipeName}&amp;page=2`)
  
    const data = await api_call.json();
    this.setState({ recipes: data.recipes });
  }
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;header className="App-header"&gt;
            React Cookbook
          &lt;/header&gt;
          &lt;InputForm getRecipe={this.getRecipe} /&gt;
         &lt;Recipes recipes={this.state.recipes} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Recipes.js</p>
  
  <pre><code>import React from "react";
  
  const Recipes = (props) =&gt; (
      &lt;div&gt;
       { props.recipes.map((recipe)=&gt; {
          return (
          &lt;div key={recipe.recipe_id }&gt;
              &lt;img src={recipe.image_url} alt={recipe.title}/&gt;
              &lt;h3&gt;{ recipe.title }&lt;/h3&gt;
           &lt;/div&gt;
              )
          })}
      &lt;/div&gt;
  )
  
  export default Recipes;
  </code></pre>