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
- type something in the text area
- choose your language
- press the button
I want to make it so I can do it this way as well
- choose your language
- type something in the text area
- 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;