Todo list

Write a TodoList component: an input labelled New task, an Add button and a <ul> list.

Clicking Add appends an <li> with the typed text (without spaces at the ends) and clears the input. Empty text or just spaces is not added. The <li> contains only the task text.

function TodoList() {
  // ...
  return null;
}

Ctrl+Enter runs the tests. Tab indents; to leave the editor with the keyboard, press Esc and then Tab. Your code is saved in this browser.

Tests (4)

render(<TodoList />);
const input = screen.getByLabelText('New task');
fireEvent.change(input, { target: { value: 'Buy milk' } });
fireEvent.click(screen.getByRole('button', { name: 'Add' }));
fireEvent.change(input, { target: { value: 'Walk the dog' } });
fireEvent.click(screen.getByRole('button', { name: 'Add' }));
expect(screen.getAllByRole('listitem').map((li) => li.textContent)).toEqual(['Buy milk', 'Walk the dog']);

render(<TodoList />);
const input = screen.getByLabelText('New task');
fireEvent.change(input, { target: { value: 'Buy milk' } });
fireEvent.click(screen.getByRole('button', { name: 'Add' }));
expect(input.value).toBe('');

render(<TodoList />);
fireEvent.change(screen.getByLabelText('New task'), { target: { value: '   ' } });
fireEvent.click(screen.getByRole('button', { name: 'Add' }));
expect(screen.queryAllByRole('listitem')).toHaveLength(0);

render(<TodoList />);
fireEvent.change(screen.getByLabelText('New task'), { target: { value: '  Read  ' } });
fireEvent.click(screen.getByRole('button', { name: 'Add' }));
expect(screen.getByRole('listitem').textContent).toBe('Read');