Q:

How would I encrypt the entire user input?

I'm trying to encrypt the inputted word of the user but it's only encrypting the last letter of that word.
In other words, If I input abc and click the button, the browser will display z instead of xyz.  It ignore the encryption of ab.
What am I doing wrong & how can I rectify this?  
import React, { Component } from 'react';

class Main extends Component {
    constructor(props) {
        super(props);

        this.state = {
            show: false,
            encryptedValue: null
        };
    }

    encrypt = () => {
        let input = document.getElementById("inputText").value;
        let encryptedValue;

        let temp = "";

        for(let i = 0; i < input.length; i++) {
            temp += input[i];

            switch(input[i].charAt(i)) {
                case "a":
                    encryptedValue = "x";
                    break;
                case "b":
                    encryptedValue = "y";
                    break;
                case "c":
                    encryptedValue = "z";
                    break;
                default:
                    encryptedValue = null;

            }
        }

        document.getElementById("res").innerHTML = temp;

        this.setState({show: true, encryptedValue: encryptedValue});
    };

    render() {
        return(
            <div>
                <input type="text" placeholder="type something" id="inputText"/>
                <button onClick={() => this.encrypt()}>Click to encrypt</button>
                <h1 id="res">{this.state.encryptedValue}</h1>
            </div>
        );
    }
}

export default Main;

A:

Inside of your switch statement you keep setting encryptedValue to an entirely new value instead of appending to your previous encryptedValue. In the case of abc it will only remember the last character you've encrypted, so z. 
If you wanted to fix this issue change = to += so it appends to encryptedValue instead of overriding it.
It also appears that you're switching over input[i].charAt(i) which is causing an error because input[i] already contains the character you want to switch.

let input = "abc";
let encryptedValue = "";

for (let i = 0; i < input.length; i++) {

  switch (input[i]) {
    case "a":
      encryptedValue += "x";
      break;
    case "b":
      encryptedValue += "y";
      break;
    case "c":
      encryptedValue += "z";
      break;
    default:
      encryptedValue += "";

  }
}

console.log(encryptedValue);

