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() === 'このWebアプリは何ですか？') { setAnswer( <div> <p>このWebアプリは、シンタックスハイライト、オートコンプリートなど多くの機能を備えたコードエディタです！</p> <p>ブラウザ内でコードの編集と実行ができ、何もインストールする必要がありません。</p> <p>シンタックスハイライト機能により、コードが美しく表示され、オートコンプリート機能により、コードを迅速かつ正確に記述できます。</p> <p>また、元に戻す/やり直し、コードのコピーまたはエクスポート、オフラインでの作業などの他の多くの機能を備えています！</p> </div> ); } else { setAnswer(<p>さあ、なにを待ってるんだ、今すぐコードの編集を始めよう。</p>); } }; return ( <div> <h1>QnAプログラムへようこそ！</h1> <form onSubmit={handleSubmit}> <label> 質問してください： <input type="text" value={question} onChange={handleQuestionChange} /> </label> <button type="submit">質問する</button> </form> <div>{answer}</div> </div> ); } export default QnA;