Basic ToDo List App in React

Posted on:September 5, 2023|Last Updated:December 4, 2023|Category: Experiment

View Live Demo! Featured image for Basic ToDo List App in React

Project Overview

The React ToDo List App is a straightforward yet effective task management application built using React. This project demonstrates my proficiency in React, including state management, component composition, and user interaction.

Tech Stack Used

React: The JavaScript library used for building the user interface.
React Bootstrap: The UI framework for responsive and visually appealing components.

Code Snippets and Explanations

Task Component

javascript

function Task({ task, toggleCompleted, setTasks, tasks }) {
  const [isEditing, setIsEditing] = useState(false);
  const [editedText, setEditedText] = useState(task.text);

  const handleDeleteClick = () => {
    const updatedTasks = tasks.filter(t => t.id !== task.id);
    setTasks(updatedTasks);
  };

  const handleEditClick = () => {
    setIsEditing(true);
  };

  const handleEditChange = (event) => {
    setEditedText(event.target.value);
  };

  const handleEditSave = () => {
    const updatedTasks = tasks.map(t => {
      if (t.id === task.id) {
        return { ...t, text: editedText };
      }
      return t;
    });

    setTasks(updatedTasks);
    setIsEditing(false);
  };

  return (
    <InputGroup className={`mb-3 task ${task.completed ? 'completed' : ''}`}>
      <InputGroup.Checkbox 
        type="checkbox"
        onChange={() => toggleCompleted(task.id)}
        checked={task.completed}
        aria-label="Checkbox for following text input"
      />
      {isEditing ? (
        <Form.Control 
          aria-label="Text input with checkbox" 
          value={editedText}
          onChange={handleEditChange}
          className='shadow-none'
        />
      ) : (
        <Form.Control 
          aria-label="Text input with checkbox" 
          value={task.text}
          readOnly
          className='shadow-none'
        />
      )}
      {isEditing ? (
        <Button variant="success" onClick={handleEditSave}>Save</Button>
      ) : (
        <>
          <Button onClick={handleEditClick}>Edit</Button>
          <Button variant="danger" onClick={handleDeleteClick}>Delete</Button>
        </>
      )}
    </InputGroup>
  );
}

The Task component manages individual tasks within the ToDo list. It handles editing, deletion, and task completion. The code snippet provides a detailed look at how these functionalities are implemented within the component.

Main Application

javascript

function App() {
  const [tasks, setTasks] = useState([
    { id: 1, text: 'Sample task 1', completed: false },
    { id: 2, text: 'Sample task 2', completed: true },
  ]);
  const [newTaskText, setNewTaskText] = useState('');

  const addTask = () => {
    if (newTaskText.trim() !== '') {
      const newTask = { id: tasks.length + 1, text: newTaskText, completed: false };
      setTasks([...tasks, newTask]);
      setNewTaskText('');
    }
  };

  const toggleCompleted = (taskId) => {
    const updatedTasks = tasks.map(task => {
      if (task.id === taskId) {
        return { ...task, completed: !task.completed };
      }
      return task;
    });

    setTasks(updatedTasks);
  };

  return (
    <div className="App">
      {/*<AppNavbar />*/}
      <Container className='mt-4'>
        <h1>TASKS</h1>
        <Card>
          <Card.Body>
            <InputGroup className='mb-3'> 
              <Button variant="primary" onClick={addTask}>Add Task</Button>
              <Form.Control
                type="text"
                placeholder="Enter task text"
                value={newTaskText}
                onChange={(e) => setNewTaskText(e.target.value)}
                className='shadow-none'
              />
            </InputGroup>

            {tasks.map((task) => (
              <Task
                key={task.id}
                task={task}
                toggleCompleted={toggleCompleted}
                setTasks={setTasks}
                tasks={tasks}
              />
            ))}
          </Card.Body>
        </Card>
      </Container>
    </div>
  );
}

The App component serves as the core of the ToDo list app, managing task state and user interactions. The code snippet focuses on how tasks are added and their completion status is toggled.

Features

Adding Tasks: Users can easily add new tasks to the list by entering task text and clicking the "Add Task" button.
Editing Tasks: Tasks can be edited in-place by clicking the "Edit" button, making it convenient to update task descriptions.
Task Completion: Users can mark tasks as completed or incomplete by toggling the checkbox associated with each task.
Task Deletion: Unwanted tasks can be removed from the list by clicking the "Delete" button.

Usage

To use this React ToDo List App:

Enter a task description in the input field.
Click the "Add Task" button to add the task to the list.
To edit a task, click the "Edit" button, make changes, and click "Save."
To mark a task as completed, click the checkbox next to the task.
To delete a task, click the "Delete" button.

Conclusion

The React ToDo List App showcases my React development skills and my ability to create user-friendly, interactive web applications. It provides a simple yet effective solution for managing tasks and demonstrates best practices in React development.

Github Repository:simple-todo-react

Latest commit: Update libsView

Tech Stack:

React

Bootstrap

Related Projects

Experiment

Dialogue Creator

A tool for designing non-linear game dialogues with a visual node-based interface. Features include adding characters, messages, branches, and randomness.

Production App

Full Stack Workout Tracker with Next 14, Prisma, & Clerk

Full stack workout tracking app. Browse over 800 exercises, create your own routines, record your workouts and view your data with beautiful charts. Built with Next.js 14, Clerk and OpenAI