title: Getting an error .map() is not a function
body: <p>Hi am a newbie to react but am stuck at this error &quot; .map is not a function&quot; need assistance</p>
  <pre><code>TypeError
  teachers.map is not a function
  </code></pre>
  <pre><code>
  class toggleView extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        teachers: [&quot;Willis&quot;, &quot;Duke&quot;, &quot;Davis&quot;, &quot;Walter&quot;],
        showPersons: false
      };
      this.handleView = this.handleView.bind(this);
    }
  
    handleView = e =&gt; {
      e.preventDefault();
      let teachers = this.state.teachers;
      this.setState({
        teachers: !teachers
      });
    };
  
    render() {
      let teachers = this.state.teachers;
      let individualTeacher = teachers.map(teacher =&gt; &lt;li&gt; {teacher} &lt;/li&gt;);
  
      let person = null;
      if (this.state.showPersons === true) {
        person = &lt;li&gt;{individualTeacher}&lt;/li&gt;;
      } else {
        person = null;
      }
  
      return (
        &lt;div&gt;
          &lt;h3&gt; Heloo folks &lt;/h3&gt;
          &lt;button onClick={this.handleView}&gt;Toggle View&lt;/button&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;ul&gt;{person}&lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <p>code snippet <a href="https://codesandbox.io/s/interesting-sara-q2j9w?file=/src/App.js:0-952" rel="nofollow noreferrer">link</a></p>