title: this.setState React bind issue
body: <p>I am attempting to pass the <code>changePage</code> class method into a child component called <code>SideBar</code>. When the <code>changePage</code> method is then triggered by an <code>onClick</code> event in the child component I receive the following error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: this.SetState is not a function</p>
  </blockquote>
  
  <p>From what I could find in other similar posts I need to bind the <code>changePage</code> method to this. I have done that but I still can't manage to get is to work.</p>
  
  <p>I also saw many suggestions to use ES6 arrow functions for my methods but I get the exact same error message if I do. </p>
  
  <p>I'm still quite new at web development and any help would be appreciated.</p>
  
  <p>Parent Component called Main:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import Content from './Content';
  import Sidebar from './Sidebar';
  
  export default class Main extends React.Component {
      constructor(props) {
       super(props);
    this.state = {
     selectedPage: 'home',
     pages: ['home','about','skills','contact'],
    };
    this.changePage = this.changePage.bind(this);
   }
  
   changePage(page) {
    console.log(page);
    this.SetState({
     selectedPage: page,
     pages: ['home','about','skills','contact']
    });
   };
  
   render() {
    return (
     &lt;div&gt;
      &lt;div id="sidebar" className="side-bar"&gt;
       &lt;Sidebar
        changePage={this.changePage}
        selectedPage={this.state.selectedPage}
        pages={this.state.pages}
       /&gt;
      &lt;/div&gt;
  
      &lt;div id="main" className="main-content"&gt;
       &lt;Content
        selectedPage={this.state.selectedPage}
       /&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    )
   } 
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Child Component:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  
  export default class Sidebar extends React.Component {
   render() {
    console.log("content props",this.props);
  
    const buttons = this.props.pages.map(button =&gt; 
     &lt;span
      className='nav-button'
      id={button}
      key={button}
      onClick={() =&gt; this.props.changePage(button)}
     &gt;
         &lt;img src={`./app/images/${button}.svg`} /&gt;
        &lt;/span&gt;
    );
     
    return (
     &lt;div&gt;
      &lt;span&gt;
          &lt;img className='headshot' src='./app/images/headshot.jpg' /&gt;
         &lt;/span&gt;
  
         &lt;div className='nav-container'&gt;
          {buttons}
         &lt;/div&gt;
        &lt;/div&gt;
    )
   }
  }</code></pre>
  </div>
  </div>
  </p>