Reset Form Button
ReactJS
Easy
6 views
Problem Description
Create a form with a reset button that clears all fields.
Output Format
Render a React component.
Constraints
Use state for fields and a reset handler.
Official Solution
import React, { useState } from 'react';
export default function App() {
const [name, setName] = useState('');
const [topic, setTopic] = useState('React');
function reset() {
setName('');
setTopic('React');
}
return (
<div style={{ padding: 16, width: 520 }}>
<h2 style={{ marginTop: 0 }}>meetcode form</h2>
<div style={{ display: 'grid', gap: 10 }}>
<input value={name} onChange={(e) => setName(e.target.value)} placeholder='Your name' style={{ padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb' }} />
<select value={topic} onChange={(e) => setTopic(e.target.value)} style={{ padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb' }}>
<option>HTML</option>
<option>CSS</option>
<option>React</option>
</select>
<div style={{ display: 'flex', gap: 10 }}>
<button type='button' onClick={reset} style={{ padding: '10px 14px', borderRadius: 12, border: '1px solid #ddd', background: '#fff' }}>Reset</button>
<button type='button' onClick={() => {}} style={{ padding: '10px 14px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff' }}>Save</button>
</div>
</div>
<p style={{ marginTop: 12, color: '#555' }}>Preview: {name || '...'} — {topic} on meetcode</p>
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!