Build a Dynamic React JS Interactive Simple Interactive To-Do List with Notifications

Written by

javascriptfundamentals

in

In the world of web development, creating user-friendly and efficient applications is paramount. One of the most common tasks users perform is managing their to-do lists. While simple to-do lists are easy to find, building one from scratch in React JS provides a fantastic learning opportunity. This tutorial guides you through building a dynamic, interactive to-do list application with added notification features. We’ll explore React components, state management, event handling, and conditional rendering. By the end, you’ll have a functional to-do list that allows users to add, edit, and delete tasks, with timely notifications to keep them on track. This project is perfect for beginners and intermediate developers looking to expand their React skills and create a practical, real-world application.

Why Build a To-Do List with Notifications?

To-do lists are more than just a list of tasks; they’re essential tools for productivity, organization, and time management. Adding notifications to a to-do list elevates its utility, making it a more proactive and user-friendly experience. Here’s why building a to-do list with notifications is a valuable exercise:

  • Practical Application: To-do lists are universally useful. Learning to build one gives you a tangible project to showcase your skills.
  • Skill Enhancement: You’ll practice core React concepts like components, state management, and event handling.
  • User Experience: Notifications enhance the user experience by providing timely reminders.
  • Real-World Relevance: Understanding how to build such an application prepares you for more complex projects.

Setting Up Your Development Environment

Before diving into the code, ensure you have Node.js and npm (Node Package Manager) or yarn installed on your system. These tools are necessary for managing project dependencies and running the React application. If you haven’t already, install them from nodejs.org.

Next, create a new React app using Create React App. Open your terminal and run the following command:

npx create-react-app todo-with-notifications
cd todo-with-notifications

This command sets up a new React project with all the necessary configurations. Navigate into the project directory using `cd todo-with-notifications`.

Project Structure and Component Breakdown

Our to-do list application will consist of several key components. Understanding the component structure helps in organizing the code and maintaining readability.

  • App.js: The main component that serves as the entry point of our application. It will manage the overall state and render the other components.
  • TodoList.js: This component will display the list of to-do items.
  • TodoItem.js: Each individual to-do item will be rendered by this component, including its edit and delete functionalities.
  • TodoForm.js: This component will handle the input form for adding new to-do items.
  • Notification.js: This component will handle the display of notifications.

Building the TodoForm Component

The TodoForm component is responsible for handling user input and adding new tasks to the list. Let’s create this component first. Create a new file named `TodoForm.js` inside the `src` folder, and add the following code:

import React, { useState } from 'react';

function TodoForm({ addTodo }) {
 const [value, setValue] = useState('');

 const handleSubmit = e => {
  e.preventDefault();
  if (!value) return;
  addTodo(value);
  setValue('');
 };

 return (
  
   setValue(e.target.value)}
  placeholder="Add Todo..."
  />
  <button type="submit">Add</button>
  
 );
}

export default TodoForm;

In this component:

  • We use the `useState` hook to manage the input field’s value.
  • The `handleSubmit` function is called when the form is submitted. It prevents the default form submission behavior, calls the `addTodo` function (passed as a prop), and clears the input field.
  • The component renders a form with an input field and a submit button.

Building the TodoItem Component

The TodoItem component displays each individual to-do item. Create a new file named `TodoItem.js` inside the `src` folder, and add the following code:

import React, { useState } from 'react';

function TodoItem({ todo, deleteTodo, editTodo }) {
 const [isEditing, setIsEditing] = useState(false);
 const [editValue, setEditValue] = useState(todo.text);

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

 const handleSave = () => {
  editTodo(todo.id, editValue);
  setIsEditing(false);
 };

 const handleChange = (e) => {
  setEditValue(e.target.value);
 };

 return (
  <li>
  {isEditing ? (
  
  
  <button>Save</button>
  </>
  ) : (
  <>
  <span>{todo.text}</span>
  <button>Edit</button>
  <button> deleteTodo(todo.id)}>Delete</button>
  </>
  )}
  </li>
 );
}

export default TodoItem;

This component:

  • Receives `todo`, `deleteTodo`, and `editTodo` as props.
  • Uses `useState` to manage the editing state (`isEditing`) and the edit value (`editValue`).
  • Renders an input field when in edit mode; otherwise, displays the to-do item’s text.
  • Includes buttons for editing and deleting the to-do item.

Building the TodoList Component

The TodoList component renders a list of `TodoItem` components. Create a new file named `TodoList.js` inside the `src` folder, and add the following code:

import React from 'react';
import TodoItem from './TodoItem';

function TodoList({ todos, deleteTodo, editTodo }) {
 return (
  <ul>
  {todos.map(todo => (
  
  ))}
  </ul>
 );
}

export default TodoList;

This component:

  • Receives `todos`, `deleteTodo`, and `editTodo` as props.
  • Maps over the `todos` array and renders a `TodoItem` component for each to-do item.
  • Uses the `key` prop to help React efficiently update the list.

Building the Notification Component

The Notification component will display messages to the user. Create a new file named `Notification.js` inside the `src` folder, and add the following code:

import React from 'react';

function Notification({ message }) {
 if (!message) return null;

 return (
  <div>
  {message}
  </div>
 );
}

export default Notification;

This component:

  • Receives a `message` prop.
  • Renders the message if it exists; otherwise, returns `null`.

Building the App Component

The App component is the main component that orchestrates everything. Replace the content of `App.js` with the following code:

import React, { useState, useEffect } from 'react';
import TodoForm from './TodoForm';
import TodoList from './TodoList';
import Notification from './Notification';
import './App.css';

function App() {
 const [todos, setTodos] = useState(() => {
  const savedTodos = localStorage.getItem('todos');
  return savedTodos ? JSON.parse(savedTodos) : [];
 });
 const [notification, setNotification] = useState('');

 useEffect(() => {
  localStorage.setItem('todos', JSON.stringify(todos));
 }, [todos]);

 const addTodo = text => {
  const newTodo = { id: Math.random(), text: text };
  setTodos([...todos, newTodo]);
  showNotification('Task added!');
 };

 const deleteTodo = id => {
  setTodos(todos.filter(todo => todo.id !== id));
  showNotification('Task deleted!');
 };

 const editTodo = (id, newText) => {
  setTodos(todos.map(todo => (todo.id === id ? { ...todo, text: newText } : todo)));
  showNotification('Task edited!');
 };

 const showNotification = (message) => {
  setNotification(message);
  setTimeout(() => {
  setNotification('');
  }, 3000);
 };

 return (
  <div>
  <h1>To-Do List</h1>
  
  
  
  </div>
 );
}

export default App;

This component:

  • Manages the state of the to-do list using the `todos` state variable.
  • Uses the `useState` hook to manage the notification message and the to-do list.
  • Uses `useEffect` hook to store and retrieve todos from local storage, making the application persistent.
  • Includes functions for adding, deleting, and editing to-do items.
  • Renders the `TodoForm`, `TodoList`, and `Notification` components.
  • Uses a `showNotification` function to display notifications for a short duration.

Adding Styles (App.css)

Create a file named `App.css` in the `src` directory and add the following CSS to style the application:

.app {
 font-family: sans-serif;
 text-align: center;
 padding: 20px;
}

.input {
 padding: 10px;
 margin-right: 10px;
 border: 1px solid #ccc;
 border-radius: 4px;
}

button {
 padding: 10px 20px;
 background-color: #4CAF50;
 color: white;
 border: none;
 border-radius: 4px;
 cursor: pointer;
}

button:hover {
 background-color: #3e8e41;
}

.notification {
 background-color: #f44336;
 color: white;
 padding: 10px;
 margin-bottom: 10px;
 border-radius: 4px;
}

ul {
 list-style: none;
 padding: 0;
}

li {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 10px;
 margin-bottom: 5px;
 border: 1px solid #eee;
 border-radius: 4px;
}

Running the Application

To run the application, open your terminal, navigate to your project directory (`todo-with-notifications`), and run the command `npm start` or `yarn start`. This will start the development server, and your application will open in your browser (usually at `http://localhost:3000`).

Implementing Notifications

Notifications are crucial for providing feedback to the user. We’ve already implemented the `Notification` component, now let’s integrate it with the actions of adding, deleting, and editing tasks within the `App.js` component. Inside the `App.js` component:

  • We’ve added a `notification` state variable using `useState` to manage the notification message.
  • The `showNotification` function sets the notification message and clears it after a delay (e.g., 3 seconds) using `setTimeout`.
  • We call `showNotification` when a task is added, deleted, or edited.
  • The `Notification` component receives the `notification` message as a prop and displays it at the top of the application.

Common Mistakes and How to Fix Them

As you build this to-do list application, you might encounter some common mistakes. Here’s how to fix them:

  • Incorrect State Updates: Make sure you are correctly updating the state. When updating arrays or objects, always create a new copy of the state using the spread operator (`…`) to trigger a re-render.
  • Missing Keys in Lists: When rendering lists of items using `.map()`, always provide a unique `key` prop for each item. This helps React efficiently update the list.
  • Incorrect Event Handling: Ensure your event handlers are correctly bound and that you are preventing default browser behavior when necessary (e.g., in form submissions).
  • Unnecessary Re-renders: Avoid unnecessary re-renders by optimizing your components. Use `React.memo` for functional components or `shouldComponentUpdate` for class components to prevent re-renders when props haven’t changed.
  • Local Storage Issues: Ensure the data you store in local storage is properly formatted (usually as a JSON string). When retrieving data, parse it back into a JavaScript object.

Key Takeaways and Best Practices

  • Component-Based Architecture: Break down your application into reusable components. This makes your code more organized and easier to maintain.
  • State Management: Use `useState` to manage component state. For more complex state management, consider using a state management library like Redux or Zustand.
  • Event Handling: Understand how to handle events in React, such as form submissions and button clicks.
  • Conditional Rendering: Use conditional rendering to display different content based on the application’s state.
  • Data Persistence: Use local storage to persist the to-do list data, so it isn’t lost when the user closes the browser.
  • Error Handling: Implement error handling to provide a better user experience and debug issues.
  • Code Readability: Write clean, well-commented code. This makes it easier for others (and your future self) to understand and maintain your code.

Enhancements and Next Steps

Now that you’ve built a basic to-do list with notifications, you can add more features to enhance its functionality and user experience. Here are some ideas:

  • Due Dates: Add due dates to tasks and implement a sorting feature to show tasks by due date.
  • Priorities: Allow users to set priorities for each task (e.g., high, medium, low) and display tasks accordingly.
  • Filtering: Implement filters to show tasks based on different criteria (e.g., completed, incomplete, due today).
  • Advanced Notifications: Use the Web Notification API to show desktop notifications, even when the browser is minimized.
  • Theming: Allow users to customize the application’s theme (e.g., light mode, dark mode).
  • Drag and Drop: Implement drag-and-drop functionality to reorder tasks.
  • Authentication: Add user authentication to allow multiple users to manage their own to-do lists.

FAQ

Q: How do I handle multiple to-do lists?

A: You could use a more complex state management solution like Redux or Zustand to manage multiple lists. Alternatively, you could modify the current state to store an array of to-do lists, each with its own set of tasks.

Q: How can I style the to-do list application?

A: You can use CSS, CSS-in-JS libraries (like Styled Components), or a CSS framework (like Bootstrap or Material UI) to style your application. Make sure to create an `App.css` file and import it into `App.js`.

Q: How do I deploy my React application?

A: You can deploy your React application to platforms like Netlify, Vercel, or GitHub Pages. These platforms provide simple and free deployment options.

Q: How do I handle errors in my application?

A: Implement error boundaries using the `componentDidCatch` lifecycle method in class components or the `ErrorBoundary` component from a library like `react-error-boundary`. Use try/catch blocks within your asynchronous functions to handle errors.

Conclusion

Building a to-do list with notifications is a fantastic way to learn and practice React fundamentals. By following this tutorial, you’ve not only created a functional application but also gained a deeper understanding of components, state management, and event handling. Remember to experiment, iterate, and build upon this foundation to further enhance your React skills and create more sophisticated applications. The combination of a well-structured application and the added feature of notifications provides a solid base for future React projects. Happy coding!

More posts