ReactJS Program to Enter Key Shortcut with Explanation
ReactJS
Hard
Hooks & Effects
28 views
1 min read
86 words
This problem helps you practice core ReactJS fundamentals in a practical way. It builds intuition around enter, key, keydown. Let’s break it down step by step so you can implement it confidently.
Problem Statement
Handle Enter key press to submit a message using document keydown.
Input Format
No input.
Output Format
Render a React component.
Constraints
Add keydown listener and clean it up.
Code Solution
This explanation is written for learning purposes and to help beginners understand the concept clearly.
import React, { useEffect, useState } from 'react';
export default function App() {
const [text, setText] = useState('');
const [sent, setSent] = useState([]);
function send() {
const t = text.trim();
if (!t) return;
setSent((prev) => [{ id: Date.now(), text: t }, ...prev]);
setText('');
}
useEffect(() => {
function onKeyDown(e) {
if (e.key === 'Enter') {
e.preventDefault();
send();
}
}
document.addEventListener('keydown', onKeyDown);
return () => document.removeEventListener('keydown', onKeyDown);
});
return (
<div style={{ padding: 16, width: 520 }}>
<h2 style={{ marginTop: 0 }}>meetcode quick message</h2>
<input value={text} onChange={(e) => setText(e.target.value)} placeholder='Type and press Enter' style={{ width: '100%', padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb' }} />
<ul style={{ marginTop: 12, paddingLeft: 18 }}>
{sent.map((m) => <li key={m.id}>{m.text}</li>)}
</ul>
</div>
);
}
Output Example
No sample I/O is provided for this question.
Common Mistakes
- Misreading input/output format.
- Not handling constraints and edge cases.
- Off-by-one errors in loops.
- Forgetting to reset variables between test cases (if any).
Solution Guide
Problem
Handle Enter key press to submit a message using document keydown.
Input / Output
Output
Render a React component.
Constraints
Add keydown listener and clean it up.
Details
Common Mistakes
- Misreading input/output format.
- Not handling constraints and edge cases.
- Off-by-one errors in loops.
- Forgetting to reset variables between test cases (if any).
Official Solution
import React, { useEffect, useState } from 'react';
export default function App() {
const [text, setText] = useState('');
const [sent, setSent] = useState([]);
function send() {
const t = text.trim();
if (!t) return;
setSent((prev) => [{ id: Date.now(), text: t }, ...prev]);
setText('');
}
useEffect(() => {
function onKeyDown(e) {
if (e.key === 'Enter') {
e.preventDefault();
send();
}
}
document.addEventListener('keydown', onKeyDown);
return () => document.removeEventListener('keydown', onKeyDown);
});
return (
<div style={{ padding: 16, width: 520 }}>
<h2 style={{ marginTop: 0 }}>meetcode quick message</h2>
<input value={text} onChange={(e) => setText(e.target.value)} placeholder='Type and press Enter' style={{ width: '100%', padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb' }} />
<ul style={{ marginTop: 12, paddingLeft: 18 }}>
{sent.map((m) => <li key={m.id}>{m.text}</li>)}
</ul>
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
