You're given some existing HTML for a Todo List app. Add the following functionality to the app:
<input> field should be cleared upon successful addition.Give the task input an accessible label so the form is operable with assistive technology.
ids, data attributes, replacing some tags, etc.), but the result should remain the same visually.1import { useState } from 'react';23let id = 0;45const INITIAL_TASKS = [6 { id: id++, label: 'Walk the dog' },7 { id: id++, label: 'Water the plants' },8 { id: id++, label: 'Wash the dishes' },9];1011export default function App() {12 const [tasks, setTasks] = useState(INITIAL_TASKS);13 const [newTask, setNewTask] = useState('');1415 return (16 <div>17 <h1>Todo List</h1>18 <div>19 <input20 aria-label="Add new task"21 type="text"22 placeholder="Add your task"23 value={newTask}24 onChange={(event) => {25 setNewTask(event.target.value);26 }}27 />28 <div>29 <button30 onClick={() => {31 const label = newTask.trim();32 if (label === '') {33 return;34 }35 setTasks((prevTasks) =>36 prevTasks.concat({37 id: id++,38 label,39 }),40 );41 setNewTask('');42 }}>43 Submit44 </button>45 </div>46 </div>47 <ul>48 {tasks.map(({ id, label }) => (49 <li key={id}>50 <span>{label}</span>51 <button52 onClick={() => {53 setTasks((prevTasks) =>54 prevTasks.filter((task) => task.id !== id),55 );56 }}>57 Delete58 </button>59 </li>60 ))}61 </ul>62 </div>63 );64}
Note: Check out the improved version which has numerous UX improvements.
We will need two state values: tasks and newTask.
tasks: Since there's a list of tasks that can be modified, we will need it to be part of the component's state. When rendering a list of elements in React, we need to specify a key for each item. We cannot use task text as the key because task text is not guaranteed to be unique. It is typically bad practice to use an array index as a key, but for this question, it is acceptable. The most foolproof method is to generate a unique ID for each task. Libraries like uuid come to mind, but in this case, a simple incrementing counter will do. Since we want ids to be globally unique, it is initialized in the module scope, outside of the component.
newTask: State to represent the new task input field, although that is not strictly necessary if we prefer uncontrolled components. However, it is generally more common to make input fields controlled, or backed by component state. The initial value for this state should not be null as React will show a warning otherwise.
New tasks should be added to the end of the tasks array. We can construct a new task object with a new id and the label field, based on the newTask value, create a new list from the previous list with the new item, and set it as the new tasks state.
Having a unique id for each task object simplifies things here because we can filter the existing list and exclude the task corresponding to the id to be removed. If you opted to use array index instead of generating unique IDs, you can use Array.prototype.splice to remove elements at that index.
Using React, the user input will be automatically escaped, so there's no need to manually prevent cross-site scripting (XSS).
Note: Check out the improved version which has numerous UX improvements.
<input>s should be labeled either via <label>s or aria-label attributes. Since the original markup doesn't contain a <label>, we can add aria-label to the <input>.aria-live region can be added to inform them about the newly added task. There is unlikely to be enough time to do this during an interview, but you will get bonus points for mentioning it. Read more about ARIA live regions on MDN.<script>, <style>, or <link>) and ensure there's no XSS.<input> is cleared after a task is added.console.log() statements will appear here.