Dependent Select Inputs
ReactJS
Hard
5 views
Problem Description
Create two selects where second options depend on first selection.
Output Format
Render a React component.
Constraints
Reset second value when first changes.
Official Solution
import React, { useMemo, useState } from 'react';
const data = {
Frontend: ['HTML', 'CSS', 'React'],
Backend: ['PHP', 'Node', 'Python']
};
export default function App() {
const [track, setTrack] = useState('Frontend');
const [topic, setTopic] = useState('HTML');
const topics = useMemo(() => data[track], [track]);
function changeTrack(next) {
setTrack(next);
setTopic(data[next][0]);
}
return (
<div style={{ padding: 16, width: 520 }}>
<h2 style={{ marginTop: 0 }}>meetcode chooser</h2>
<div style={{ display: 'grid', gap: 10 }}>
<select value={track} onChange={(e) => changeTrack(e.target.value)} style={{ padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb' }}>
<option>Frontend</option>
<option>Backend</option>
</select>
<select value={topic} onChange={(e) => setTopic(e.target.value)} style={{ padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb' }}>
{topics.map((t) => <option key={t}>{t}</option>)}
</select>
</div>
<p style={{ marginTop: 12, color: '#555' }}>Selected: {track} → {topic}</p>
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!