File size: 837 Bytes
cce8120 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | import React from 'react';
function TodoList({ todos, onToggle, onDelete }) {
if (!todos.length) return <p>No todos yet.</p>;
return (
<ul style={{ listStyle: 'none', padding: 0 }}>
{todos.map((todo) => (
<li key={todo.id} style={{ display: 'flex', alignItems: 'center', marginBottom: '0.5rem' }}>
<input
type="checkbox"
checked={todo.completed}
onChange={() => onToggle(todo.id, !todo.completed)}
/>
<span style={{ flexGrow: 1, marginLeft: '0.5rem', textDecoration: todo.completed ? 'line-through' : 'none' }}>
{todo.title}
</span>
<button onClick={() => onDelete(todo.id)} style={{ marginLeft: '0.5rem' }}>
Delete
</button>
</li>
))}
</ul>
);
}
export default TodoList;
|