Official Solution
import React, { useMemo, useState } from 'react';
export default function App() {
const [items, setItems] = useState([
{ id: '1', title: 'React hooks' },
{ id: '2', title: 'State basics' },
{ id: '3', title: 'Forms validation' }
]);
const [editingId, setEditingId] = useState('');
const [draft, setDraft] = useState('');
const editing = useMemo(() => items.find((x) => x.id === editingId), [items, editingId]);
function startEdit(id) {
const it = items.find((x) => x.id === id);
setEditingId(id);
setDraft(it.title);
}
function save() {
const t = draft.trim();
if (!t) return;
setItems((prev) => prev.map((x) => x.id === editingId ? { ...x, title: t } : x));
setEditingId('');
setDraft('');
}
function cancel() {
setEditingId('');
setDraft('');
}
return (
<div style={{ padding: 16, width: 520 }}>
<h2 style={{ marginTop: 0 }}>meetcode saved list</h2>
<ul style={{ paddingLeft: 18 }}>
{items.map((x) => (
<li key={x.id} style={{ marginBottom: 8 }}>
{editingId === x.id ? (
<span style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}>
<input value={draft} onChange={(e) => setDraft(e.target.value)} style={{ padding: '8px 10px', borderRadius: 12, border: '1px solid #bbb', width: 260 }} />
<button type='button' onClick={save} style={{ padding: '8px 12px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff' }}>Save</button>
<button type='button' onClick={cancel} style={{ padding: '8px 12px', borderRadius: 12, border: '1px solid #ddd', background: '#fff' }}>Cancel</button>
</span>
) : (
<span style={{ display: 'inline-flex', gap: 10, alignItems: 'center' }}>
<span>{x.title}</span>
<button type='button' onClick={() => startEdit(x.id)} style={{ padding: '6px 10px', borderRadius: 12, border: '1px solid #ddd', background: '#fff' }}>Edit</button>
</span>
)}
</li>
))}
</ul>
{editing ? <div style={{ marginTop: 10, color: '#555' }}>Editing: {editing.title}</div> : null}
</div>
);
}
No comments yet. Start the discussion!