title: React binding error: FontChooser.js:15 Uncaught TypeError: this.setstate is not a function
body: <p>I keep getting an error message for</p>
  
  <blockquote>
    <p>Uncaught TypeError: this.setstate is not a function</p>
  </blockquote>
  
  <p>In my code line.
  I am using VSCode. I am using the Chrome Debugger because there are issues with my debugging in VSCode directly. I have tried to fix this issue but that has not made a difference and was finally never corrected. I am using LiveServer from VSCode to launch the code. There is a better configuration but I am just trying to run the code. </p>
  
  <p>My code is below</p>
  
  <p>HTML FILE</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="Fontchoose_container"&gt;&lt;/div&gt;
  
      &lt;script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/@babel/standalone/babel.min.js"&gt;&lt;/script&gt;
      &lt;div&gt;
      Here goes...
       &lt;!--Programmed scripts--&gt;
        &lt;script src="./FontChooser.js" type="text/babel"&gt;&lt;/script&gt; 
      ....done
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  
  <p>JS-Script</p>
  
  <pre><code>class FontChooser extends React.Component {
      constructor(props) {
      super(props);
  
      this.state = {hideElement:true}
      this.text="Click on this part"
      this.size=10
  //  this.handleClicks= this.handleClicks.bind(this)
  
      }
      handleClicks() {
  
          if (this.state.hideElement) {
              console.log(this.state)
              this.setstate({hideElement:false})  //ERROR HAPPENS HERE
  
          } else {
              this.setstate({hideElement:true})
          }
  document.getElementById("checkbox").hidden=this.state.hideElement
  document.getElementById("decreaseButton").hidden=this.state.hideElement
  document.getElementById("fontSizeSpan").hidden=this.state.hideElement
  document.getElementById("increaseButton").hidden=this.state.hideElement
  document.getElementById("textSpan").hidden=this.state.hideElement
  
       }
  
  
      render() {
      return(&lt;div &gt;
              &lt;button id="LaunchButton" onClick={this.handleClicks.bind(this)}&gt;Click me&lt;/button&gt;
             &lt;input type="checkbox" id="boldCheckbox" hidden={true}/&gt;
             &lt;button id="decreaseButton" hidden={true}&gt;-&lt;/button&gt;
             { &lt;span id="fontSizeSpan" hidden={true}&gt;{this.props.size}&lt;/span&gt; }
             &lt;button id="increaseButton" hidden={true}&gt;+&lt;/button&gt;
             &lt;span id="textSpan" hidden={true}&gt;{this.props.text}&lt;/span&gt;
             &lt;/div&gt;
          //    hidden={false}
      );
      }
  }
  ReactDOM.render( &lt;FontChooser /&gt;, document.getElementById('Fontchoose_container'))
  </code></pre>
  
  <p>I looked at several references as well as this post but the corrections do no make a difference:
  <a href="https://stackoverflow.com/questions/39210971/this-setstate-is-undefined">this.setState is undefined</a></p>
  
  <p>I have tried correcting a bind call in several different ways and this results to an object with initialized attributes. In all the examples that I found they used <code>this.setstate({*/set parameters:new*/})</code>. In my case this causes the error and I haven't seen the reason why the call is not valid, a part from problems related to binding.</p>