title: Issue Converting react class components to functional components with state is undefined
body: <p>Can life cycles be used in Arrow functions using componentDidMount() and having an error my only response I tried to add a useEffect ?  Trying to Converting class components to functional components.<br />
  I created a contentful blog in a separate project below and would like to add my blog to my blog.js page in my main project.</p>
  <p>Original contentful blog that works.</p>
  <p>Blog.js</p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;./App.css&quot;;
  import { client } from &quot;./client&quot;;
  import Posts from &quot;./components/blog/Posts&quot;;
  
  class App extends React.Component {
    state = {
      articles: [],
    };
  
    componentDidMount() {
      client
        .getEntries()
        .then((response) =&gt; {
          console.log(response);
          this.setState({
            articles: response.items,
          });
        })
        .catch(console.error);
    }
  
    render() {
      return (
        &lt;div className=&quot;App&quot;&gt;
          &lt;div className=&quot;container&quot;&gt;
            &lt;header&gt;
              &lt;div className=&quot;wrapper&quot;&gt;
                &lt;span&gt;React and Content&lt;/span&gt;
              &lt;/div&gt;
            &lt;/header&gt;
            &lt;main&gt;
              &lt;div className=&quot;blog__page&quot;&gt;
                &lt;h1 class=&quot;blog__page__header&quot;&gt;ZILAH MUSIC PUBLISHING NEWS&lt;/h1&gt;
                &lt;div className=&quot;blogs&quot;&gt;
                  &lt;div className=&quot;wrapper&quot;&gt;
                    &lt;Posts posts={this.state.articles} /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/main&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <p>export default App;</p>
  <p>I added a useEffect and now my state is undefined</p>
  <pre><code> useEffect(() =&gt; {
      client
        .getEntries()
        .then((response) =&gt; {
          console.log(response);
          this.setState({
            articles: response.items,
          });
        })
        .catch(console.error);
    }, []);
  </code></pre>
  <p>I duplicated my previous running pages and would like to include my blog but I have an issue converting<a href="https://i.stack.imgur.com/Wub5c.png" rel="nofollow noreferrer">enter image description here</a></p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import { Link, Redirect } from &quot;react-router-dom&quot;;
  import { connect } from &quot;react-redux&quot;;
  import PropTypes from &quot;prop-types&quot;;
  import { client } from &quot;../../client&quot;;
  import Posts from &quot;../../components/blog/Posts&quot;;
  
  import &quot;./Blog.css&quot;;
  
  class App extends React.Component inside an arrow function
  
  const Blog = ({ isAuthenticated }) =&gt; {
    if (isAuthenticated) {
      return &lt;Redirect to=&quot;/dashboard&quot; /&gt;;
    }
  
  
  useEffect(() =&gt; {
          client
            .getEntries()
            .then((response) =&gt; {
              console.log(response);
              this.setState({
                articles: response.items,
              });
            })
            .catch(console.error);
        }, []);
  
    return (
      &lt;React.Fragment&gt;
        &lt;div className=&quot;App&quot;&gt;
        &lt;div className=&quot;container&quot;&gt;
            &lt;header&gt;
              &lt;div className=&quot;wrapper&quot;&gt;
                &lt;span&gt;React and Content&lt;/span&gt;
              &lt;/div&gt;
            &lt;/header&gt;
            &lt;main&gt;
              &lt;div className=&quot;blog__page&quot;&gt;
                &lt;h1 className=&quot;blog__page__header&quot;&gt;
                  ZILAH MUSIC PUBLISHING NEWS
                &lt;/h1&gt;
                &lt;div className=&quot;blogs&quot;&gt;
                  &lt;div className=&quot;wrapper&quot;&gt;
                    &lt;Posts posts={this.state.articles} /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/main&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/React.Fragment&gt;
    );
  };
  
  Bog.propTypes = {
    isAuthenticated: PropTypes.bool,
  };
  
  const mapStateToProps = (state) =&gt; ({
    isAuthenticated: state.auth.isAuthenticated,
  });
  
  export default connect(mapStateToProps)(Blog);
  </code></pre>