import React, { useState } from 'react' import { useForm } from 'react-hook-form' function Converter() { let { register, handleSubmit, formState: { errors }, setValue } = useForm(); let [inputText, setInputText] = useState(false); let [editMode, setEditMode] = useState(false); let [convert, setConvert] = useState(''); const handleSubmition = (data) => { console.log('data: ', data); if (data.convert === 'upper') { setConvert(data.inputText.toUpperCase()) setInputText(true) } else if(data.convert === 'lower'){ setConvert(data.inputText.toLowerCase()) setInputText(true) } else if(data.convert === 'encode'){ setConvert(btoa(data.inputText)) setInputText(true) } else if(data.convert === 'decode'){ setConvert(atob(data.inputText)) setInputText(true) } } return (

{ inputText && (

Converted Text

) } { !inputText && (

Text to be converted

{ !editMode && ( ) } { editMode && ( ) } { errors.inputText && Enter Some Text } {/* Radio Buttons */}

Upper Case

Lower Case

Encode Base64

Decode Base64

{ errors.convert && Select an Option }

) }

) } export default Converter

Do you see value in our efforts?

How to build a Text Converter? | Frontend Coding Challenge | React.js | Beginner

@Vignesh Varanasi