Reactjs - value undefined

Question

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

dannyjolie · Accepted Answer · 2016-04-02 20:09:15Z

1

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

edited Apr 2, 2016 at 20:09

answered Apr 2, 2016 at 19:57

dannyjolie

11.4k3 gold badges35 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Akshat Mahajan Over a year ago

Wait, why does this.state become undefined inside _handleKey? Isn't this bound to the App object?

dannyjolie Over a year ago

@AkshatMahajan No, this inside the function is not automatically bound to App this when using ES2015 class syntax.

Akshat Mahajan Over a year ago

Could you point to the relevant documentation on this? I've scoured the MDN pages and can't really find something that says the same. I'd like to know more about this behaviour.

dannyjolie Over a year ago

@AkshatMahajan From the React docs: facebook.github.io/react/docs/…

dannyjolie Over a year ago

@Wasteland It would have thrown an error if the event was triggered. But in order to capture a key event on an element, that element must have focus, e.g. like an input field with the cursor in it. And I don't think that is possible to do on an SVG element without a few hacks.

|

Collectives™ on Stack Overflow

Reactjs - value undefined

1 Answer 1

12 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Linked

Related