Language Translator using React

// App.js

import './App.css';
import Translator from './components/Translator';

function App() {
  return (
    <div className="App">
      <Translator />
    </div>
  );
}

export default App;

// language.json

{
    "af": { "name": "Afrikaans" },
    "ak": { "name": "Akan" },
    "sq": { "name": "Albanian" },
    "am": { "name": "Amharic" },
    "ar": { "name": "Arabic" },
    "hy": { "name": "Armenian" },
    "as": { "name": "Assamese" },
    "ay": { "name": "Aymara" },
    "az": { "name": "Azerbaijani" },
    "bm": { "name": "Bambara" },
    "eu": { "name": "Basque" },
    "be": { "name": "Belarusian" },
    "bn": { "name": "Bengali" },
    "bs": { "name": "Bosnian" },
    "bg": { "name": "Bulgarian" },
    "my": { "name": "Burmese" },
    "ca": { "name": "Catalan; Valencian" },
    "ny": { "name": "Chichewa; Chewa; Nyanja" },
    "zh": { "name": "Chinese" },
    "co": { "name": "Corsican" },
    "hr": { "name": "Croatian" },
    "cs": { "name": "Czech" },
    "da": { "name": "Danish" },
    "dv": { "name": "Divehi; Dhivehi; Maldivian;" },
    "nl": { "name": "Dutch" },
    "en": { "name": "English" },
    "eo": { "name": "Esperanto" },
    "et": { "name": "Estonian" },
    "ee": { "name": "Ewe" },
    "fi": { "name": "Finnish" },
    "fr": { "name": "French" },
    "gl": { "name": "Galician" },
    "ka": { "name": "Georgian" },
    "de": { "name": "German" },
    "el": { "name": "Greek, Modern" },
    "gn": { "name": "Guaraní" },
    "gu": { "name": "Gujarati" },
    "ht": { "name": "Haitian; Haitian Creole" },
    "ha": { "name": "Hausa" },
    "he": { "name": "Hebrew (modern)" },
    "hi": { "name": "Hindi" },
    "hu": { "name": "Hungarian" },
    "id": { "name": "Indonesian" },
    "ga": { "name": "Irish" },
    "ig": { "name": "Igbo" },
    "is": { "name": "Icelandic" },
    "it": { "name": "Italian" },
    "ja": { "name": "Japanese" },
    "jv": { "name": "Javanese" },
    "kn": { "name": "Kannada" },
    "kk": { "name": "Kazakh" },
    "km": { "name": "Khmer" },
    "rw": { "name": "Kinyarwanda" },
    "ky": { "name": "Kirghiz, Kyrgyz" },
    "ko": { "name": "Korean" },
    "ku": { "name": "Kurdish" },
    "la": { "name": "Latin" },
    "lb": { "name": "Luxembourgish, Letzeburgesch" },
    "lg": { "name": "Luganda" },
    "ln": { "name": "Lingala" },
    "lo": { "name": "Lao" },
    "lt": { "name": "Lithuanian" },
    "lv": { "name": "Latvian" },
    "mk": { "name": "Macedonian" },
    "mg": { "name": "Malagasy" },
    "ms": { "name": "Malay" },
    "ml": { "name": "Malayalam" },
    "mt": { "name": "Maltese" },
    "mi": { "name": "Māori" },
    "mr": { "name": "Marathi (Marāṭhī)" },
    "mn": { "name": "Mongolian" },
    "ne": { "name": "Nepali" },
    "no": { "name": "Norwegian" },
    "om": { "name": "Oromo" },
    "or": { "name": "Oriya" },
    "pa": { "name": "Panjabi, Punjabi" },
    "fa": { "name": "Persian" },
    "pl": { "name": "Polish" },
    "ps": { "name": "Pashto, Pushto" },
    "pt": { "name": "Portuguese" },
    "qu": { "name": "Quechua" },
    "ro": { "name": "Romanian, Moldavian, Moldovan" },
    "ru": { "name": "Russian" },
    "sa": { "name": "Sanskrit (Saṁskṛta)" },
    "sd": { "name": "Sindhi" },
    "sm": { "name": "Samoan" },
    "sr": { "name": "Serbian" },
    "gd": { "name": "Scottish Gaelic; Gaelic" },
    "sn": { "name": "Shona" },
    "si": { "name": "Sinhala, Sinhalese" },
    "sk": { "name": "Slovak" },
    "sl": { "name": "Slovene" },
    "so": { "name": "Somali" },
    "st": { "name": "Southern Sotho" },
    "es": { "name": "Spanish; Castilian" },
    "su": { "name": "Sundanese" },
    "sw": { "name": "Swahili" },
    "sv": { "name": "Swedish" },
    "ta": { "name": "Tamil" },
    "te": { "name": "Telugu" },
    "tg": { "name": "Tajik" },
    "th": { "name": "Thai" },
    "ti": { "name": "Tigrinya" },
    "tk": { "name": "Turkmen" },
    "tl": { "name": "Tagalog" },
    "tr": { "name": "Turkish" },
    "ts": { "name": "Tsonga" },
    "tt": { "name": "Tatar" },
    "ug": { "name": "Uighur, Uyghur" },
    "uk": { "name": "Ukrainian" },
    "ur": { "name": "Urdu" },
    "uz": { "name": "Uzbek" },
    "vi": { "name": "Vietnamese" },
    "cy": { "name": "Welsh" },
    "fy": { "name": "Western Frisian" },
    "xh": { "name": "Xhosa" },
    "yi": { "name": "Yiddish" },
    "yo": { "name": "Yoruba" }
}

// Translator.js
import React, { useState } from 'react'
import './Translator.css'
import languageList from './language.json';

export default function Translator() {
    const [inputFormat, setInputFormat] = useState('en');
    const [outputFormat, setOutputFormat] = useState('hi');
    const [translatedText, setTranslatedText] = useState('Translation');
    const [inputText, setInputText] = useState('');

    const handleReverseLanguage = () => {
        const value = inputFormat;
        setInputFormat(outputFormat);
        setOutputFormat(value);
        setInputText('');
        setTranslatedText('Translation');
    }

    const handleRemoveInputText = () => {
        setInputText('');
        setTranslatedText('Translation');
    }

    const handleTranslate = async () => {
        if (!inputText || !inputFormat || !outputFormat) return;
        document.querySelector('.fa.fa-spinner.fa-spin').style.display = "block";
        document.querySelector('.translate').style.display = 'none';

        const url = 
`https://microsoft-translator-text.p.rapidapi.com/translate?to%5B0%5D=${outputFormat}&api-version=3.0&profanityAction=NoAction&textType=plain`;
        const options = {
            method: 'POST',
            headers: {
                'content-type': 'application/json',
                'X-RapidAPI-Key': {"YOUR_API_KEY"},
                'X-RapidAPI-Host': 'microsoft-translator-text.p.rapidapi.com'
            },
            body: JSON.stringify([
                {
                    Text: inputText
                }
            ])
        };
        try {
            const response = await fetch(url, options);
            const result = await response.text();
            const responseObject = JSON.parse(result);
            const translation = responseObject[0].translations[0].text;
            setTranslatedText(translation);
        } catch (error) {
            console.log(error);
            alert("Please Try Again! Some Error Occurred at your side");
        }
        document.querySelector('.fa.fa-spinner.fa-spin').style.display = "none";
        document.querySelector('.translate').style.display = 'block';
    }
    return (
        <div className="container">
            <div className="row1">
                <select value={inputFormat} 
                        onChange={(e) => setInputFormat(e.target.value)}>
                    {Object.keys(languageList).map((key, index) => {
                        const language = languageList[key];
                        return (
                            <option key={index} value={key}>{language.name}</option>
                        );
                    })}
                </select>
                <svg className='reversesvg' 
                     onClick={handleReverseLanguage} 
                     focusable="false" 
                     xmlns="http://www.w3.org/2000/svg" 
                     viewBox="0 0 24 24">
                <path d=
"M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z">
                </path>
                </svg>
                <select value={outputFormat} onChange={(e) => {
                    setOutputFormat(e.target.value);
                    setTranslatedText('Translation');
                }}>
                    {Object.keys(languageList).map((key, index) => {
                        const language = languageList[key];
                        return (
                            <option key={index + 118} value={key}>{language.name}</option>
                        );
                    })}
                </select>
            </div>
            <div className="row2">
                <div className="inputText">
                    <svg className='removeinput' 
                         style={{ display: (inputText.length) ? "block" : "none" }} 
                         onClick={handleRemoveInputText} 
                         focusable="false" 
                         xmlns="http://www.w3.org/2000/svg" 
                         viewBox="0 0 24 24">
                         <path d=
"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z">
                        </path>
                    </svg>
                    <textarea type="text" 
                              value={inputText} 
                              placeholder='Enter Text' 
                              onChange={(e) => setInputText(e.target.value)} />
                </div>
                <div className="outputText">{translatedText}</div>
            </div>
            <div className="row3">
                <button className='btn' 
                        onClick={handleTranslate}>
                        <i className="fa fa-spinner fa-spin"></i>
                        <span className='translate'>Translate</span>
                </button>
            </div>
        </div>
    )
}