CODEWITHSUNDEEP
javascriptreactjs
Wasteland
Wasteland

Reputation: 5399

Reactjs - value undefined

First of all, I suspect that const vector object is probably in a wrong place but I don't know where to put it. I'm trying to control the position of the SVG object with arrow keys. It does not seem to be able to access x.

class Circle extends React.Component {
  render() {
    const { h, w, x, y, r, stroke, fill } = this.props;
    return (
      <svg height={h} width={w}>
        <circle cx={x} cy={y} r={r}
          stroke={stroke} strokeWidth="3" fill={fill} 
        />
      </svg> 
    )
  }
}

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      h: 100,
      w: 500,
      x: 50,
      y: 50,
      r: 40,
      stroke: "black",
      fill: "red"
    }
  }
  _currentPosition() {
    // Display the current position
    console.log(this.state.x, this.state.y);
  }

  _handleKey(e){
    // Define key codes and movement vectors
    const vector = {
        37: [-10, 0],
        38: [0, -10],
        39: [10, 0],
        40: [0, 10]
    };
    // Display the current position
    this.currentPosition;

    // Detect key presses and change the position accordingly
      if (e.keyCode in vector) {
      this.setState({
        x: this.state.x + vector[e.keyCode][0],
        y: this.state.y + vector[e.keyCode][1]
      })
        } 
  }

   componentDidMount() {
     document.addEventListener("keydown", this._handleKey, false);
  }
   render() {
    return (
      <div>
      <Circle { ...this.state } onKeyPress={this.handleKeyPress}/>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))

I have got the error:

VM211 pen.js:76Uncaught TypeError: Cannot read property 'x' of undefined
_handleKey @ VM211 pen.js:76

The code it is: http://codepen.io/wasteland/pen/GZvWeo?editors=0110

Thank you

Upvotes: 0

Views: 3056

Answers (1)

dannyjolie
dannyjolie

Reputation: 11369

Your problem is that this.state is undefined inside _handleKey. The solution is to bind the function to this inside your constructor like this:

constructor(props) {
  super(props)
  this._handleKey = this._handleKey.bind(this)
  ...
  ...

This is generally how you allow class methods to access the class instance' this.

React docs on "No Autobinding": https://facebook.github.io/react/docs/reusable-components.html#no-autobinding

Upvotes: 1

Related Questions