How can I use "Enter" button to setState to my component

Question

I'm a real beginner with ReactJs Es6, I'm trying to setState to my component when I hit the "Enter" Button, I have tried some of the answers here, like this one, https://stackoverflow.com/a/34634290/8301413, but it hasn't worked the way I want to.

What I have so far is when I enter a text on my input box, the <h1> changes it's state and displays the state with every character input. What I want to happen is, I input my text first, then when I hit enter, that's the only time the state updates and displays the text from the input box.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export class App extends Component {
  constructor(props) {
    super(props);

    this.state = { userInput: '' };
    this.handleUserInput = this.handleUserInput.bind(this);
  }

  handleUserInput(e) {
    this.setState({userInput: e.target.value});
  }

  render() {
    return (
       <div>    
          <input 
           type="text" 
           value={this.state.userInput}
           onChange={this.handleUserInput}
           />
          <h1>{this.state.userInput}</h1>
       </div>      
     );
  }
}

export default App;

Answer 1

To achieve that behaviour use uncontrolled component, means don't use the value property of input element. Instead of using onChange event use onKeyDown and check the keyCode, update the state only when user press the enter key.

Check this working snippet:

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = { userInput: '' };
    this.handleUserInput = this.handleUserInput.bind(this);
  }

  handleUserInput(e) {
    if(e.keyCode == 13)
        this.setState({userInput: e.target.value});
  }

  render() {
    return (
       <div>    
          <input 
             type="text" 
             onKeyDown={this.handleUserInput}
          />
          <h1>{this.state.userInput}</h1>
       </div>      
     );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'//>

Answer 2

@Mayank Shukla answer may be right, however it changes it to uncontrolled component.

Demo

You just need to add on more event onKeyPress which waits for "Enter" key.

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = { userInput: '', output: '' };
    this.handleUserInput = this.handleUserInput.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleUserInput(e) {
    if (e.key === 'Enter') {
        this.setState({output: e.target.value});
    }
  }

  handleChange(e) {
    this.setState({userInput: e.target.value});
  }

  render() {
    return (
       <div>    
          <input 
           type="text" 
           value={this.state.userInput}
           onKeyPress={this.handleUserInput} // Only for "Enter" purpose
           onChange={this.handleChange}
           />
          <h1>{this.state.output}</h1>
       </div>      
     );
  }
}

This way you still keep the component controlled.

Example of Controlled Component objective