import React, { useState } from 'react'; function QnA() { const [question, setQuestion] = useState(''); const [answer, setAnswer] = useState(''); const handleQuestionChange = (event) => { setQuestion(event.target.value); }; const handleSubmit = (event) => { event.preventDefault(); if (question.toLowerCase() === '¿qué es esta aplicación web?') { setAnswer( <div> <p>¡Esta aplicación web es un editor de código con resaltado de sintaxis, autocompletado y muchas más funciones!</p> <p>Te permite escribir y ejecutar código directamente en el navegador, sin necesidad de instalar ningún software.</p> <p>El resaltado de sintaxis hace que tu código se vea hermoso, y la función de autocompletado te ayuda a escribir código de forma más rápida y precisa.</p> <p>¡Además, tiene muchas otras funciones como la capacidad de deshacer/rehacer, copiar o exportar código, trabajar sin conexión, etc.!</p> </div> ); } else { setAnswer(<p>Bueno, ¿qué estás esperando? Comienza a editar tu código ahora mismo.</p>); } }; return ( <div> <h1>¡Bienvenido al programa de preguntas y respuestas (QnA)!</h1> <form onSubmit={handleSubmit}> <label> Hazme una pregunta: <input type="text" value={question} onChange={handleQuestionChange} /> </label> <button type="submit">Preguntar</button> </form> <div>{answer}</div> </div> ); } export default QnA;