Results don’t show until something is typed into text area

Currently making a small app that translates text to binary or ASCII. I’ve run into an issue where my code only works if you follow these steps

1. type something in the text area
2. choose your language
3. press the button

I want to make it so I can do it this way as well

1. choose your language
2. type something in the text area
3. press the button

It must have something to do with the message state being undefined if you select a language first.

import { useState, useEffect } from "react";

function Translator() {
  const [message, setMessage] = useState("");
  const [selectedLanguageResult, setSelectedLanguageResult] = useState("");
  const [results, setResults] = useState("");

  function handleLanguageSwitch(e) {
    let selectedValue = e.target.value;
    if (selectedValue === "Ascii") {
      setSelectedLanguageResult(translateToAscii());
    } else if (selectedValue === "Binary") {
      setSelectedLanguageResult(translateToBinary());
    }
  }
  function handleChange(e) {
    setMessage(e.target.value);
  }
  function translateToAscii() {
    let arr = [];
    for (let i = 0; i < message.length; i++) {
      arr.push(message.charCodeAt(i));
    }
    return arr.join(" ");
  }
  function translateToBinary() {
    let strOut = "";
    for (let i = 0; i < message.length; i++) {
      strOut += message[i].charCodeAt(0).toString(2) + " ";
    }
    return strOut;
  }
  function handleClick(e) {
    e.preventDefault();
    setResults(selectedLanguageResult);
  }

  return (
    <div className="App">
      <form>
        <select name="language" onChange={handleLanguageSwitch}>
          <option selected disabled>
            --Choose language--
          </option>
          <option value="Ascii">Ascii</option>
          <option value="Binary">Binary</option>
        </select>
        <textarea
          type="text"
          id="message"
          onChange={handleChange}
          value={message}
        ></textarea>
        <button onClick={handleClick}>Translate</button>
      </form>
      <h2>{results}</h2>
    </div>
  );
}

export default Translator;

Answer

You should keep the language in state and set the result when the user submits.

Have a look at this example: https://codesandbox.io/s/flamboyant-bas-wqso2n?file=/src/App.js

I changed the button to a submit button and put the onClick function into the forms onSubmit (this is how a form should be done in react).

I removed selectedLanguageResult in favour of language state.

The select element I used the value prop = language and set the value to your first option as an empty string. React prefers this (you may have noticed a warning in the console).

Finally when the user submits the form, that is where the result is calculated and set.

Hope that makes sense.