Reactjs function firing twice?

Hi i try to learn Reactjs, and want to do a simple Caeser-En/Decryption (shifting characters).

It works fine when the Inputtext is changeing, but it seems that if the encryption-key is changeing (updateRot()), the CaeserShift-function fires twice (or even more often?).

But i can’t figure out what i’m doing wrong.

class MarkdownEditor extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.updateRot = this.updateRot.bind(this);
    this.state = {value: 'abcdefghijklmnopqrstuvwxyz',
                  rot: 1
                 };
  }
  
  updateRot(e){
    this.setState({
      rot: e.target.value      
    });
  }
  
  handleChange(e){
    this.setState({
      value: e.target.value
      });
  }

caesarShift(str, amount){

	var output = '';
	// Go through each character
	for (var i = 0; i < str.length; i ++) {

		// Get the character we'll be appending
		var c = str[i];

		// If it's a letter...
		if (c.match(/[a-z]/i)) {

			// Get its code
			var code = str.charCodeAt(i);
			// Uppercase letters
			if ((code >= 65) && (code <= 90))
				c = String.fromCharCode(((code - 65 + amount) % 26) + 65);

			// Lowercase letters
			else if ((code >= 97) && (code <= 122))
				c = String.fromCharCode(((code - 97 + amount) % 26) + 97);
     
		}
		// Append
		output += c;
	}
	// All done!
  return output
    
};

  render() {
    return (
      

Input