Edit JSX Code with Syntax Highlighter and AutoCompletion. Copy after you are done.
No Installations necessary.
Features:
100% Free
Edit Code Offline
Syntax Highlighter
Autocompletion
Auto-Indentation
Undo/Redo
Copy code
Resizable to full screen
Privacy-focused. No code uploaded.
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() === 'what is this web app?') {
setAnswer(
<div>
<p>This web app is a code editor with a syntax highlighter, autocompletion, and many more features!</p>
<p>It allows you to write, and run edit code directly in the browser, without needing to install any software.</p>
<p>The syntax highlighter makes your code look beautiful, and the autocompletion feature helps you write code faster and more accurately.</p>
<p>Plus, it has many other features like the ability to undo/redo, copy or export code, work offline etc!</p>
</div>
);
} else {
setAnswer(<p>Well, what are you waiting for, start editing your code right now.</p>);
}
};
return (
<div>
<h1>Welcome to the QnA program!</h1>
<form onSubmit={handleSubmit}>
<label>
Ask me a question:
<input type="text" value={question} onChange={handleQuestionChange} />
</label>
<button type="submit">Ask</button>
</form>
<div>{answer}</div>
</div>
);
}
export default QnA;