title: Why won't my code encrypt a letter and show it as well?
body: <p>I'm trying to play around with encryption and would like to start by testing out how to change a single letter submitted upon clicking the button and show it as well.</p>
  
  <p>For example, upon the user entering <code>a</code> and clicking the button, it should display <code>x</code> to the browser.</p>
  
  <p>What am I doing wrong?</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Main extends Component {
      constructor(props) {
          super(props);
  
          this.state = {
              show: false
          };
  
          this.encrypt = this.encrypt.bind(this);
      }
  
      encrypt = () =&gt; {
          let input = document.getElementById("inputText").value;
  
          this.setState({show: true});
  
          switch(input) {
              case "a":
                  return "x";
  
              default:
                  return null;
          }
      };
  
      render() {
          return(
              &lt;div&gt;
                  &lt;input type="text" placeholder="type something" id="inputText"/&gt;
                  &lt;button onClick={() =&gt; this.encrypt}&gt;Click to encrypt&lt;/button&gt;
                  {
                      this.state.show ? this.encrypt() : null
                  }
              &lt;/div&gt;
          );
      }
  }
  
  export default Main;
  </code></pre>