Fix todo list multiple status filter display

Daily question

Medium

This question is a daily question and will count towards your daily streak.

You’re working on a to-do list app where users can mark tasks as completed. The app should display a list of tasks, but it also needs to handle tasks with multiple statuses (not just "completed" or "pending"). What’s wrong with this code when trying to display the tasks properly?

ArraysFilterMapReal world applications

1const tasks = [
2  { id: 1, name: 'Buy milk', status: 'completed' },
3  { id: 2, name: 'Clean house', status: 'in-progress' },
4  { id: 3, name: 'Write report', status: 'pending' },
5  { id: 4, name: 'Go for a run', status: 'completed' }
6];
7
8const renderTasks = tasks => {
9  const status = 'completed';
10  return tasks.filter(task => task.status === status)
11              .map(task => `<li>${task.name} - ${task.status}</li>`)
12              .join('');
13};
14
15console.log(renderTasks(tasks));

This question is a daily question and will count towards your daily streak.

You’re working on a to-do list app where users can mark tasks as completed. The app should display a list of tasks, but it also needs to handle tasks with multiple statuses (not just "completed" or "pending"). What’s wrong with this code when trying to display the tasks properly?

Hint