title: Uncaught (in promise) TypeError: Cannot read property 'slice' of undefined
body: <p>I am building a sample recipe app named : Forkify using Javascript,NPM,Babel and Webpack in which i am using custom API<br />
  <strong>API URL : forkify-api.herokuapp.com</strong></p>
  <p><strong>TO SEARCH RESULT</strong></p>
  <p>Returns a list of recipes for a specific query</p>
  <p><strong>Path: <a href="https://forkify-api.herokuapp.com/api/search" rel="nofollow noreferrer">https://forkify-api.herokuapp.com/api/search</a></strong></p>
  <p><strong>Example URL: <a href="https://forkify-api.herokuapp.com/api/search?q=pizza" rel="nofollow noreferrer">https://forkify-api.herokuapp.com/api/search?q=pizza</a></strong></p>
  <p><strong>GET</strong></p>
  <p>Returns the details about a specific recipe</p>
  <p><strong>Path: <a href="https://forkify-api.herokuapp.com/api/get" rel="nofollow noreferrer">https://forkify-api.herokuapp.com/api/get</a></strong></p>
  <p><strong>Example URL: <a href="https://forkify-api.herokuapp.com/api/get?rId=47746" rel="nofollow noreferrer">https://forkify-api.herokuapp.com/api/get?rId=47746</a></strong></p>
  <p>When i run project in command line using command <strong>npm start run</strong> and when i input query pizza in search box, i get the following error ( image attached )</p>
  <p><a href="https://i.stack.imgur.com/kqNun.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kqNun.png" alt="Landing Page" /></a></p>
  <p><a href="https://i.stack.imgur.com/TdHlz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TdHlz.png" alt="Entering Query Input as &quot;pizza&quot;" /></a></p>
  <p><a href="https://i.stack.imgur.com/UqBYC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UqBYC.png" alt="Error" /></a></p>
  <p>Below are the code files :</p>
  <p><strong>index.js</strong></p>
  <pre><code>/*
  Global state of the app
  - search object
  - current recipe object
  - shopping list object
  - liked recipe
  */
  
  import Search from &quot;./models/Search&quot;;
  import Recipe from &quot;./models/Recipe&quot;;
  import * as searchView from &quot;./views/searchView&quot;;
  import { elements, renderLoader, clearLoader } from &quot;./views/base&quot;;
  const state = {};
  
  /* SEARCH CONTROLLER */
  
  const controlSearch = async () =&gt; {
      // 1. Get query from the view.
      const query = searchView.getInput(); //TODO
      // console.log(query);
      if (query) {
          // 2. New search object and add it to state.
          state.search = new Search(query);
  
          // 3. Prepare UI for results.
          searchView.clearinput();
          searchView.clearResults();
          renderLoader(elements.searchRes);
  
          // 4. Search for recipes.
          await state.search.getResults();
  
          // 5. Render results on UI.
          clearLoader();
          searchView.renderResults(state.search.result);
      }
  }
  
  elements.searchForm.addEventListener(&quot;submit&quot;, e =&gt; {
      e.preventDefault();
      controlSearch();
  });
  
  elements.searchResPages.addEventListener(&quot;click&quot;,e=&gt;{
      const btn=e.target.closest(&quot;.btn-inline&quot;);
      if (btn) {
          const goToPage=parseInt(btn.dataset.goto,10);
          searchView.clearResults();
          searchView.renderResults(state.search.result,goToPage);
      }
  });
  
  </code></pre>
  <p><strong>Search.js</strong></p>
  <pre><code>import axios from &quot;axios&quot;;
  // import {proxy} from &quot;../config&quot;;
  export default class Search{
      constructor(query){
          this.query=query;
      }
  
      async getResults() {
          try{
          const res = axios(`https://forkify-api.herokuapp.com/api/search?q=${this.query}`);
          this.result = res.data.recipes;
          // console.log(this.result);
          }
          catch(error){
              alert(error);
          }
      };
  
  }
  </code></pre>
  <p><strong>searchView.js</strong></p>
  <pre><code>import { elements } from &quot;./base&quot;;
  
  export const getInput = () =&gt; elements.searchInput.value;
  
  export const clearinput = () =&gt; {
      elements.searchInput.value = &quot;&quot;;
  };
  
  export const clearResults = () =&gt; {
      elements.searchResList.innerHTML = &quot;&quot;;
      elements.searchResPages.innerHTML = &quot;&quot;;
  };
  
  /*
  &quot;pasta with tomato and spinach&quot;
  acc:0/acc+curr.length=5 /newTitle =['pasta']
  acc:5/acc+curr.length=9 /newTitle =['pasta','with']
  acc:9/acc+curr.length=15 /newTitle =['pasta','with','tomato']
  acc:15/acc+curr.length=18 /newTitle =['pasta','with','tomato']
  acc:18/acc+curr.length=25 /newTitle =['pasta','with','tomato']
  */
  
  const limitRecipeTitle = (title, limit = 17) =&gt; {
      const newTitle = [];
      if (title.length &gt; limit) {
          title.split(&quot; &quot;).reduce((acc, curr) =&gt; {
              if (acc + curr.length &lt;= limit) {
                  newTitle.push(curr);
              }
              return acc + curr.length;
          }, 0);
          // return the results
          return `${newTitle.join(' ')}...`;
      }
      return title;
  };
  
  const renderRecipe = recipe =&gt; {
      const markup = `
      &lt;li&gt;
          &lt;a class=&quot;results__link&quot; href=&quot;#${recipe.recipe_id}&quot;&gt;
              &lt;figure class=&quot;results__fig&quot;&gt;
                  &lt;img src=&quot;${recipe.image_url}&quot; alt=&quot;${recipe.title}&quot;&gt;
              &lt;/figure&gt;
              &lt;div class=&quot;results__data&quot;&gt;
                  &lt;h4 class=&quot;results__name&quot;&gt;${limitRecipeTitle(recipe.title)}&lt;/h4&gt;
                   &lt;p class=&quot;results__author&quot;&gt;${recipe.publisher}&lt;/p&gt;
              &lt;/div&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      `;
      elements.searchResList.insertAdjacentHTML(&quot;beforeend&quot;, markup);
  };
  
  // type: &quot;prev&quot; or &quot;next&quot;
  const createButton = (page, type) =&gt; `
  &lt;button class=&quot;btn-inline results__btn--${type}&quot; data-goto=${type === &quot;prev&quot; ? page - 1 : page + 1}&gt;
  &lt;span&gt;Page ${ type === &quot;prev&quot; ? page - 1 : page + 1}&lt;/span&gt;
  &lt;svg class=&quot;search__icon&quot;&gt;
      &lt;use href=&quot;img/icons.svg#icon-triangle-${ type === &quot;prev&quot; ? &quot;left&quot; : &quot;right&quot;}&quot;&gt;&lt;/use&gt;
  &lt;/svg&gt;
  &lt;/button&gt;
  `
  
  
  const renderButtons = (page, numResults, resPerPage) =&gt; {
      const pages = Math.ceil(numResults / resPerPage);
      let button;
      if (page === 1 &amp;&amp; pages &gt; 1) {
          // Only button to go to next page.
          button = createButton(page, &quot;next&quot;);
      }
      else if (page &lt; pages) {
          // Both buttons
          button = `
          ${createButton(page, &quot;prev&quot;)}
          ${createButton(page, &quot;next&quot;)}
          `;
      }
      else if (page === pages &amp;&amp; pages &gt; 1) {
          // Only button to go to previous page.
          button = createButton(page, &quot;prev&quot;);
      }
      elements.searchResPages.insertAdjacentHTML(&quot;afterbegin&quot;, button);
  }
  
  export const renderResults = (recipes, page = 1, resPerPage = 10) =&gt; {
      // render results of current page
      const start = (page - 1) * resPerPage;
      const end = page * resPerPage;
      // recipes.slice(start,end).forEach(renderRecipe);
  
      recipes.slice(start, end).forEach(renderRecipe);
  
      // render pagination buttons
      renderButtons(page, recipes.length, resPerPage);
  };
  </code></pre>
  <p><strong>Recipe.js</strong></p>
  <pre><code>import axios from &quot;axios&quot;;
  // import {key} from &quot;../config&quot;;
  export default class Recipe{
      constructor (id){
          this.id=id;
      }
  
      async getRecipe(){
          try {
              const res=await axios(`https://forkify-api.herokuapp.com/api/get?rId=${this.query}`);
              console.log(res);
          } catch (error) {
              console.log(error);
          }
      }
  };
  </code></pre>
  <p><strong>base.js</strong></p>
  <pre><code>export const elements = {
      searchForm: document.querySelector(&quot;.search&quot;),
      searchInput: document.querySelector(&quot;.search__field&quot;),
      searchRes: document.querySelector(&quot;.results&quot;),
      searchResList: document.querySelector(&quot;.results__list&quot;),
      searchResPages:document.querySelector(&quot;.results__pages&quot;)
  };
  
  export const elementStrings = {
      loader: &quot;loader&quot;
  };
  
  export const renderLoader = parent =&gt; {
      const loader = `
      &lt;div class=&quot;${elementStrings.loader}&quot;&gt;
          &lt;svg&gt;
              &lt;use href=&quot;img/icons.svg#icon-cw&quot;&gt;
              &lt;/use&gt;
          &lt;/svg&gt;
      &lt;/div&gt;
      `;
      parent.insertAdjacentHTML(&quot;afterbegin&quot;, loader);
  };
  
  export const clearLoader = () =&gt; {
      const loader = document.querySelector(`.${elementStrings.loader}`);
      if (loader) loader.parentElement.removeChild(loader);
  };
  </code></pre>
  <p><strong>any solution please ?</strong></p>