trainReact.com

Problem List

||

3. Todo List

Easy
Category: State Management
State ManagementForm HandlinguseStateArray Operations

Problem Description

Implement a React-based Todo List application. Complete the TodoListEasy component with functionality to add, toggle, and remove todo items.

Requirements

  • Implement addTodo function
  • Implement removeTodo function
  • Implement toggleTodo function
  • Todo structure: {id: number, text: string, completed: boolean}
  • Trim todo text before adding
  • Prevent empty todos (show error message)
  • Clear input after adding
  • Each todo: checkbox, text, remove button
  • Apply line-through style when completed
  • Render todos in <ul> with data-testid="todo-list"
  • Use data-testid="error-message" for error display

Constraints

  • Don't modify existing JSX structure or data-testid attributes
  • Maintain provided inline styles

Example Todo Object

1{id: 1, text: "My todo test", completed: false}
2
import React, { useState } from 'react';

function TodoListEasy() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');
  const [error, setError] = useState('');
  
  // TODO: Implement addTodo function
  const addTodo = () => {
    {/* {id: 1, text: "My todo test", completed: true} */}
  };
  
  // TODO: Implement toggleTodo function
  const toggleTodo = () => {
  
  };
  
  // TODO: Implement removeTodo function
  const removeTodo = () => {
  
  };
  return (
    <div>
      <h1>Todo List</h1>
      <form onSubmit={addTodo}
        aria-label="Add New Todo"
        data-testid="todo-form"
        style={{
          display: 'flex',
          gap: '10px',
          marginBottom: '10px'
        }}
      >
        <label htmlFor="new-todo">New Todo</label>
        <input
          id="new-todo"
          type="text"
          value={newTodo}
          placeholder="Enter a new todo"
          data-testid="new-todo-input"
        />
        <button 
          type="submit"
          data-testid="add-todo-button"
        >Add Todo</button>
      </form>
      {error && <p role="alert" data-testid="error-message">{error}</p>}
      <ul data-testid="todo-list">
      {todos.map((todo) => (
        <li key={todo.id} style={{
              display: 'flex',
              gap: '10px',
              marginBottom: '10px'
            }}>
          <input
              type="checkbox"
              checked={false}
              data-testid={`todo-item-${todo.id}-checkbox`}
            />
            <span
              style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
              data-testid={`todo-item-${todo.id}-text`}
            >
              {todo.text}
            </span>
          
          {/* TODO: Complete functionality */}
         <button
              onClick={() => removeTodo(todo.id)}
              aria-label={`Remove ${todo.text}`}
              data-testid={`todo-item-${todo.id}-remove-button`}
            >
              Remove
            </button>
        </li>
      ))}
      </ul>
    </div>
  );
}

export default TodoListEasy;

Open browser consoleTests