Soy nuevo en reaccionar, estoy creando una aplicación de utilidad de texto en la que el usuario puede hacer algunas cosas en su texto como cambiar a mayúsculas, minúsculas, traducir, etc. Actualmente estoy atascado en cómo traducir texto usando un botón. Busco mucho pero no puedo encontrar ninguna solución efectiva.

Aquí está mi componente TextForm:

 import counterpart from 'counterpart'; import Translate from 'react-translate-component'; counterpart.registerTranslations('hn',{ textarea:{text} }); counterpart.setLocale('en'); export default function TextForm(props) { const [text, setText] = useState(''); const handleOnChange = (event) => { setText(event.target.value); } const handleUpChange = () => { let newText = text.toUpperCase(); setText(newText); } const handleLoChange = () => { let newText = text.toLowerCase(); setText(newText); } const handleTrChange = () => { <Translate content='textarea' component='textarea' /> let newText = text setText(newText); } return ( <> <div className="container my-3"> <h1>{props.heading}</h1> <div className="mb-3"> <textarea className="form-control" id="myBox" value={text} onChange={handleOnChange} placeholder="Enter here" rows="8"></textarea> </div> <button className="btn btn-primary mx-1" onClick={handleUpChange}>Convert to Uppercase</button> <button className="btn btn-primary mx-1" onClick={handleLoChange}>Convert to Lowercase</button> <button className="btn btn-primary mx-1" onClick={handleTrChange}>Translate into Hindi</button> </div> <div className="container my-3"> <h2>Your Text Summary</h2> <p>{text.split(' ').length} words and {text.length} characters</p> <p>{0.008 * text.split(' ').length} Minutes read</p> <h3>Preview</h3> <p>{text}</p> </div> </> ) }