title: accessing state inside class in react
body: <p>I have the following code for a react component.</p>
  
  <pre><code>import React, { Component } from 'react';
  import CalcButton from './CalcButton';
  import Operand from './Operand';
  import '../custom.css';
  
  class App extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        prevVal: '',
        currentVal: ''
      }
    }
  
    handleOpClick(event) {
      console.log('------------event------', event.target.value);
      console.log(this.state.currentVal);
      this.setState({
        currentVal: 'test'
      })
    }
  
    render() {
  
      const firstRow = ["7", "8", "9"];
      const secRow = ["4", "5", "6"];
      const thirdRow = ["1", "2", "3",];
      return (
        &lt;div className="container"&gt;
          &lt;div className="app"&gt;
            &lt;div className="inpCont"&gt;
              &lt;input
              type="text"
              className="inpBox"
              value={this.state.currentVal}
              /&gt;
            &lt;/div&gt;
            &lt;div className="btnCont"&gt;
              &lt;div className="btnRow"&gt;
              {
                firstRow.map((row, index) =&gt; {
                  return &lt;CalcButton
                    handleClick={(event) =&gt; {
                      this.setState({
                        currentVal: this.state.currentVal + event.target.value
                      });
                    }}
                    key={index}
                    number={row} /&gt;;
                })
              }
              &lt;Operand
                handleOpClick={this.handleOpClick}
                operator="/" /&gt;
              &lt;/div&gt;
              &lt;div className="btnRow"&gt;
              {
                secRow.map((row, index) =&gt; {
                  return &lt;CalcButton
                    handleClick={(event) =&gt; {
                      this.setState({
                        currentVal: this.state.currentVal + event.target.value
                      });
                    }}
                    key={index}
                    number={row}/&gt;;
                })
              }
              &lt;Operand
                handleOpClick={this.handleOpClick}
                operator="*" /&gt;
              &lt;/div&gt;
              &lt;div className="btnRow"&gt;
              {
                thirdRow.map((row, index) =&gt; {
                  return &lt;CalcButton
                    handleClick={(event) =&gt; {
                      this.setState({
                        currentVal: this.state.currentVal + event.target.value
                      });
                    }}
                    key={index}
                    number={row} /&gt;;
                })
              }
              &lt;Operand
                handleOpClick={this.handleOpClick}
                operator="+" /&gt;
              &lt;/div&gt;
              &lt;div className="btnRow"&gt;
              &lt;Operand
                handleOpClick={this.handleOpClick}
                operator="Clear" /&gt;
              &lt;Operand
                handleOpClick={this.handleOpClick}
                operator="=" /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default App;
  </code></pre>
  
  <p>When I try to access the state inside the handleOpClick method of the class, it throws the following error.</p>
  
  <pre><code>App.jsx:18 Uncaught TypeError: Cannot read property 'state' of null
      at handleOpClick (http://localhost:3000/static/js/bundle.js:32849:24)
      at Object.ReactErrorUtils.invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:17144:17)
      at executeDispatch (http://localhost:3000/static/js/bundle.js:16927:22)
      at Object.executeDispatchesInOrder (http://localhost:3000/static/js/bundle.js:16950:6)
      at executeDispatchesAndRelease (http://localhost:3000/static/js/bundle.js:16338:23)
      at executeDispatchesAndReleaseTopLevel (http://localhost:3000/static/js/bundle.js:16349:11)
      at Array.forEach (native)
      at forEachAccumulated (http://localhost:3000/static/js/bundle.js:17247:10)
      at Object.processEventQueue (http://localhost:3000/static/js/bundle.js:16552:8)
      at runEventQueueInBatch (http://localhost:3000/static/js/bundle.js:24174:19)
  </code></pre>
  
  <p>How do I access state inside component class method. I want to write common logic to handle operator click. Where am I going wrong ?</p>
  
  <p>Thanks</p>