Document Title From Select
ReactJS
Medium
5 views
Problem Description
Update document.title when a piece of state changes.
Output Format
Render a React component.
Constraints
Use useEffect to write title and keep it in sync.
Official Solution
import React, { useEffect, useState } from 'react';
export default function App() {
const [topic, setTopic] = useState('React');
useEffect(() => {
document.title = topic + ' | meetcode';
}, [topic]);
return (
<div style={{ padding: 16 }}>
<h2 style={{ marginTop: 0 }}>Document title</h2>
<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={{ marginTop: 10, color: '#555' }}>Title updates to: {topic} | meetcode</div>
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!