Reactjs - value undefined
<p>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.</p>

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

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 (
      &lt;div&gt;
      &lt;Circle { ...this.state } onKeyPress={this.handleKeyPress}/&gt;
      &lt;/div&gt;
    )
  }
}

ReactDOM.render(&lt;App /&gt;, document.getElementById('app'))
</code></pre>

<p>I have got the error:</p>

<pre><code>VM211 pen.js:76Uncaught TypeError: Cannot read property 'x' of undefined
_handleKey @ VM211 pen.js:76
</code></pre>

<p>The code it is:
<a href="http://codepen.io/wasteland/pen/GZvWeo?editors=0110" rel="nofollow">http://codepen.io/wasteland/pen/GZvWeo?editors=0110</a></p>

<p>Thank you</p>