title: Uncaught TypeError: Cannot read property 'renderRows' of undefined
body: <p>I am in the process of switching a component class to a function in my website so I can use hooks to interact with my backend, but after switching to the arrow function i am now getting the error above. What exactly changed to cause this error, I know i had to delete the render{} but is that what is causing it? Here is my current code where the error is located.</p>
  <pre><code>import React, { Component, useEffect, useState } from &quot;react&quot;;
  import ReactDOM from 'react-dom';
  import { Link } from &quot;react-router-dom&quot;;
  
  import &quot;./HomePageBody.scss&quot;;
  import products from &quot;../../../../back-end/products&quot;;
  
  const HomePageBody = () =&gt; {
  
      const getProducts = async() =&gt; {
        try {
          const response = await fetch(&quot;http://localhost:5000/carts&quot;);
          const jsonData = await response.json();
  
          console.log(jsonData);
        } catch (err) {
          console.error(err.message); 
        }
      }
  
      useEffect(() =&gt; {
        getProducts();
      });
  
      let renderRows = () =&gt; {
        let finalArr = [];
        products.forEach((product) =&gt; {
          finalArr.push(
            &lt;div className=&quot;col-md-6 col-lg-4 mt-4 colCard w-75&quot;&gt;
              &lt;Link
                to={{
                  pathname: &quot;/ProductPage/&quot; + product.name,
                  state: { sentproduct: product },
                }}
              &gt;
                &lt;div className=&quot;card w-100 h-100&quot;&gt;
                  &lt;div className=&quot;card-img-wrap w-100 h-100&quot;&gt;
                    &lt;img
                      className=&quot; card-img-top&quot;
                      src={product.img}
                      alt=&quot;Card image cap&quot;
                    /&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;card-body&quot;&gt;
                    &lt;h6 className=&quot;card-title text-center&quot;&gt;{product.name}&lt;/h6&gt;
                    &lt;p className=&quot;card-text text-center&quot;&gt;
                      &lt;small className=&quot;text-muted red&quot;&gt;${product.price}&lt;/small&gt;
                    &lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/Link&gt;
            &lt;/div&gt;
          );
        });
        return finalArr;
      }
  
      return (
        &lt;div className=&quot;largebody &quot;&gt;
          &lt;div
            id=&quot;carouselAd&quot;
            className=&quot;carousel slide carousel-custom&quot;
            data-ride=&quot;carousel&quot;
          &gt;
            &lt;div className=&quot;carousel-inner&quot;&gt;
              &lt;div className=&quot;carousel-item active&quot;&gt;
                &lt;a href=&quot;#&quot;&gt;
                  &lt;img
                    className=&quot;&quot;
                    src=&quot;https://res.cloudinary.com/ndc-images/image/upload/f_auto,fl_force_strip.preserve_transparency.progressive.sanitize,q_auto:best/media//blog/buy-affordable-high-quality-clothes-that-last-from-sustainable-brands.jpg&quot;
                    alt=&quot;First slide&quot;
                  /&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div className=&quot;carousel-item&quot;&gt;
                &lt;a href=&quot;#&quot;&gt;
                  &lt;img
                    className=&quot;&quot;
                    src=&quot;https://res.cloudinary.com/ndc-images/image/upload/f_auto,fl_force_strip.preserve_transparency.progressive.sanitize,q_auto:best/media//blog/buy-affordable-high-quality-clothes-that-last-from-sustainable-brands.jpg&quot;
                    alt=&quot;Second slide&quot;
                  /&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div className=&quot;carousel-item&quot;&gt;
                &lt;a href=&quot;#&quot;&gt;
                  &lt;img
                    className=&quot;&quot;
                    src=&quot;https://res.cloudinary.com/ndc-images/image/upload/f_auto,fl_force_strip.preserve_transparency.progressive.sanitize,q_auto:best/media//blog/buy-affordable-high-quality-clothes-that-last-from-sustainable-brands.jpg&quot;
                    alt=&quot;Third slide&quot;
                  /&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div className=&quot;carsouselControls&quot;&gt;
                &lt;a
                  className=&quot;carousel-control-prev&quot;
                  href=&quot;#carouselAd&quot;
                  role=&quot;button&quot;
                  data-slide=&quot;prev&quot;
                &gt;
                  &lt;span
                    className=&quot;carousel-control-prev-icon&quot;
                    aria-hidden=&quot;true&quot;
                  &gt;&lt;/span&gt;
                  &lt;span className=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;
                &lt;/a&gt;
                &lt;a
                  className=&quot;carousel-control-next&quot;
                  href=&quot;#carouselAd&quot;
                  role=&quot;button&quot;
                  data-slide=&quot;next&quot;
                &gt;
                  &lt;span
                    className=&quot;carousel-control-next-icon color.red&quot;
                    aria-hidden=&quot;true&quot;
                  &gt;&lt;/span&gt;
                  &lt;span className=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
                &lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div className=&quot;col-lg-9 col-sm-12 m-auto&quot;&gt;
            &lt;h1 className=&quot;text-center mt-5 mb-3 ml-auto mr-auto headerFont&quot;&gt;
              &quot;Equality is the soul of liberty; there is, in fact, no liberty
              without it.&quot; - Frances Wright
            &lt;/h1&gt;
            &lt;p className=&quot;paragraphFont&quot;&gt;
              We at EqualityFits believe that all people should be treated equaly
              and fairly regarldess of race, religion, and sexuality. We support
              groups such as Black Lives Matter and LBGTQ. Every one of our
              products donates to an underlying organization that has to do with
              that specific product. We believe that helping theses organizations
              is a first step in total equality throughout society.
            &lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div className=&quot;container cardbuttons text-center mb-5 mt-5&quot;&gt;
            &lt;div className=&quot;row mt-5 inline-block&quot;&gt;
              &lt;div className=&quot;col-lg-4 ml-auto&quot;&gt;
                &lt;Link
                  to={{
                    pathname: &quot;/Collections/&quot; + &quot;LGBT&quot;,
                    key: Math.random,
                    state: { sentinfo: &quot;LGBT&quot; },
                  }}
                &gt;
                  &lt;div className=&quot;card&quot;&gt;
                    &lt;div className=&quot;card-img-wrap&quot;&gt;
                      &lt;img
                        className=&quot;card-img-top ml-auto mt-2 img&quot;
                        src=&quot;http://equalityfits.com/img/menstshirt.png&quot;
                        alt=&quot;Card image cap&quot;
                      /&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/Link&gt;
              &lt;/div&gt;
              &lt;div className=&quot;col-lg-4 &quot;&gt;
                &lt;Link
                  to={{
                    pathname: &quot;/Collections/&quot; + &quot;LGBT&quot;,
                    key: Math.random,
                    state: { sentinfo: &quot;LGBT&quot;, name: false, cat: true },
                  }}
                &gt;
                  &lt;div className=&quot;card position-relative&quot;&gt;
                    &lt;div className=&quot;card-img-wrap right&quot;&gt;
                      &lt;img
                        className=&quot;card-img-top ml-auto mt-2 img&quot;
                        src=&quot;http://equalityfits.com/img/menstshirt.png&quot;
                        alt=&quot;Card image cap&quot;
                      &gt;&lt;/img&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/Link&gt;
              &lt;/div&gt;
              &lt;div className=&quot;col-lg-4 mr-auto&quot;&gt;
                &lt;Link
                  to={{
                    pathname: &quot;/Collections/&quot; + &quot;LGBT&quot;,
                    key: Math.random,
                    state: { sentinfo: &quot;LGBT&quot;, name: false, cat: true },
                  }}
                &gt;
                  &lt;div className=&quot;card&quot;&gt;
                    &lt;div className=&quot;card-img-wrap&quot;&gt;
                      &lt;img
                        className=&quot;card-img-top mr-auto mt-2 img&quot;
                        src=&quot;http://equalityfits.com/img/womenstshirt.png&quot;
                        alt=&quot;Card image cap&quot;
                      /&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/Link&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div className=&quot;row ml-auto mr-auto mt-5 w-75&quot;&gt;
            &lt;div className=&quot;col-lg-9 col-sm-12 m-auto p-0 mt-5&quot;&gt;
              &lt;h1
                className=&quot;text-center font-weight-bold mt-5&quot;
                style={{ marginLeft: &quot;9px&quot; }}
              &gt;
                Best Selling
              &lt;/h1&gt;
              &lt;hr style={{ borderTop: &quot;3px solid rgba(0, 0, 0, 0.1)&quot; }}&gt;&lt;/hr&gt;
              &lt;div className=&quot;row justify-content-center&quot;&gt;
                **{this.renderRows()}**  &lt;-----------------Where i call upon the function
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
    
  
  export default HomePageBody;
  
  </code></pre>
  <p>I call upon the function at the bottom, i put arrows next to it to make it easier.</p>