I would like to clear the textarea content after enter key press on react. However when enter key press the text area clears but the enter key remains (new line). How can I fix this?

constructor(){
    this.state = { text : '' }
}

keypress(e){ 
   if(e.key == 'Enter'){
      this.setState({
        send_message: ''
      })
   }
}

<textarea value={this.state.text} placeholder="Text" rows="1" className="form-textarea typing-area" onKeyPress={this.keypress.bind(this)}></textarea>

I would like to clear the textarea content after enter key press on react. However when enter key press the text area clears but the enter key remains (new line). How can I fix this?

constructor(){
    this.state = { text : '' }
}

keypress(e){ 
   if(e.key == 'Enter'){
      this.setState({
        send_message: ''
      })
   }
}

<textarea value={this.state.text} placeholder="Text" rows="1" className="form-textarea typing-area" onKeyPress={this.keypress.bind(this)}></textarea>

• javascript
• reactjs

• try to add return false; at the end of your keypress function – Patrick Ferreira Commented Nov 15, 2016 at 9:20

2 Answers 2

You can use event.preventDefault when the key is 'Enter':

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text : '' }
    this.handleChange = this.handleChange.bind(this);
    this.keypress = this.keypress.bind(this);
  }
  
  handleChange(event) {
    this.setState({text: event.target.value});
  }
  
  keypress(e){ 
    if(e.key === 'Enter'){
      e.preventDefault();
      this.setState({
        send_message: this.state.text,
        text: '',
      });
    }
  }
  render() {
    return (
      <div>
        <textarea 
          value={this.state.text} 
          placeholder="Text" 
          rows="1" 
          className="form-textarea typing-area" 
          onChange={this.handleChange}
          onKeyPress={this.keypress} 
        />
        <pre>{JSON.stringify(this.state, null, 2)}</pre>
      </div>
    );
  }
}

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

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

Let's say this text area is for your users to leave ments. I would place my text area inside a form element and onSubmit with a handleSubmit function you would define above your render:

handleChange = (event) => {
    this.setState({ ment: event.target.value });
  };
handleSubmit = (event) => {
    event.preventDefault();

    this.setState({ ment: '' });
  };
render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <h4>Add a Comment</h4>
        <textarea onChange={this.handleChange} value={this.state.ment} />
        <div>
          <button>Submit Comment</button>
        </div>
      </form>
    );
  }

Notice in handleSubmit I added the e.preventDefault() since it is a form element and the default behavior of HTML form elements is to submit. Then I added a this.setState() with an object with a ment property and a value of empty string so that your text area can empty out. In your case, you can call it { text: '' }.

Notice I also have an onChange event handler with {this.handleChange}. handleChange receives this event object and the new value of your text state or in my case ment state will e from event.target.value.

As you are developing this ponent I would also be testing it out along the way. So consider a test that finds the textarea element, simulates a change event, provide a fake event object, force the ponent to update and then assert that the text area has indeed changed its value. In such a test you would need to manually set the event.target.value value.