title: TypeError: this.state.followers.map is not a function
body: <p>I am building a simple github user card generator that fetches user data and that of their followers from github api and display them on a user card. The followers data fetched returns an array of objects. To pass data to the followers component, i mapped over the fetched array but on compiling i get error message <code>TypeError: this.state.followers.map is not a function</code>. I initialized the followers state with an empty string. Please help what could be the problem? Here is the code:</p>
  
  <pre><code>import React from 'react';
  import githublogo from './githublogo.svg'
  import UserCard from './components/userCard.js';
  import Followers from './components/follower.js';
  import ErrorPage from './components/errorPage.js';
  import Navbar from './components/navbar.js';
  import './App.css';
  
  
  
  class App extends React.Component {
    constructor(props) {
      super(props);
  
       this.state = {
         user: {},
         followers: [],
         input: '',
         submit: '',
         userExists: null,
      }
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.handleExistence = this.handleExistence.bind(this);
     }
  
    componentDidMount() {
      fetch('https://api.github.com/users/{this.state.submit}')
      .then(response =&gt; response.json())
      .then(data =&gt; {
        console.log(data);
        this.setState({
           user: data
        });
     });
  
    fetch(`https://api.github.com/users/{this.state.submit}/followers`)
    .then(res =&gt; res.json())
    .then(data =&gt; {
      console.log(data);
      this.setState({
        followers: data
      });
    });
   }
  
   handleChange(e) {
     this.setState({
        input: e.target.value
     });
   }
  
   handleSubmit(e) {
      e.preventDefault();
      this.setState(state =&gt; ({
        submit: state.input
      }));
   }
  
   handleExistence() {
     if (this.state.submit === this.state.user.login) {
       this.setState({
          userExists: true
       });
     }
     else {
       this.setState({
         userExists: false
       });
     }
   }
  
   render() {
  
  const renderFollowers = this.state.followers.map((follower) =&gt; &lt;Followers 
        avatar= {follower.avatar_url} 
        username= {follower.login}
        id= {follower.id}
        githubLink= {follower.html_url}
        darkMode= {this.state.darkMode}
      /&gt;);
  
  return (
    &lt;div&gt; 
      &lt;Navbar /&gt; 
      &lt;div&gt;
        &lt;header&gt;
          &lt;img src={githublogo} alt="logo" /&gt;
          &lt;h1&gt;Welcome to Github UserCard Generator&lt;/h1&gt;
          &lt;form onSubmit={this.handleSubmit}&gt;
            &lt;input type="text" value={this.state.input} onChange={this.handleChange} placeholder="Github Username" /&gt;
            &lt;button type="submit" onClick={this.handleExistence}&gt;Generate User Card&lt;/button&gt;
          &lt;/form&gt;
        &lt;/header&gt;
      &lt;/div&gt;
      {this.state.userExists ? &lt;div&gt;
        &lt;UserCard
          avatar={this.state.user.avatar_url}
          name={this.state.user.name}
          username={this.state.user.login}
          location={this.state.user.location}
          publicRepos={this.state.user.public_repos}
          following={this.state.user.following}
          followers={this.state.user.followers}
          githubLink={this.state.user.html_url} 
        /&gt;
        {renderFollowers} 
      &lt;/div&gt; : &lt;ErrorPage /&gt; }
    &lt;/div&gt;
  
    );
  
    }
  }
  </code></pre>