title: Update state with object from key input [React]
body: <p>I'm trying to update the state of my component based on key inputs, and pass it to another component.</p>
  
  <p>I can get call <code>keyboardInput()</code> and console.log the correctly when one of the arrow keys are pressed, however I cannot get the returned value to render in <code>&lt;p&gt;The current input is: {this.keyboardInput}&lt;/p&gt;</code></p>
  
  <p>E.g. <code>return {'Y': 1};</code> when the up key is pressed, but nothing appears in the <code>&lt;p&gt;</code> element</p>
  
  <p>I believe I'm missing some understanding when it comes to the <code>componentWillReceiveProps</code> function, but I'm at a loss.</p>
  
  <p>Could it be that <code>keyboardInput</code> is returning an object not a string value? But even when I change the return to just be a string, I still cannot get it to render.</p>
  
  <p>What am I missing here?</p>
  
  <p>Thanks,</p>
  
  <pre><code>class GameBoard extends Component {
  
      constructor(props) {
          super(props);
          this.state = {
              test: {},
          };
      }
  
      // Captures event from main window
          keyboardInput = (e) =&gt; {
  
              const code = e.keyCode ? e.keyCode : e.which;
  
              // Change X and Y values
              if (code === 38) { //up key
                  return {'Y': 1};
              } else if (code === 40) { //down key
                  return {'Y': -1};
              } else if (code === 37) { // left key
                  return {'X': 1};
              } else if (code === 39) { // right key
                  return {'X': -1};
              }
          };
  
      componentWillMount() {
          window.addEventListener('keydown', this.keyboardInput);
      }
  
      componentWillUnmount() {
          window.removeEventListener('keydown', this.keyboardInput);
      }
  
      componentWillReceiveProps(nextProps) {
          this.setState.test = this.keyboardInput(nextProps);
      }
  
      render() {
  
          return (
              &lt;div&gt;
                  &lt;p&gt;The current input is: {this.keyboardInput}&lt;/p&gt;
                  &lt;Ball/&gt;
              &lt;/div&gt;
          )
      }
  
  }
  
  class App extends Component {
  
    render() {
  
        const boardStyle = {
            'position': 'absolute',
            'backgroundColor': '#7f8c8d',
            'height': '100%',
            'width': '100%',
  
        };
  
      return (
        &lt;div&gt;
          &lt;header&gt;
            &lt;h1 className="App-title"&gt;Welcome to Moving Objects&lt;/h1&gt;
          &lt;/header&gt;
            &lt;div style={boardStyle}&gt;
                &lt;GameBoard/&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>