Build a Dynamic React JS Interactive Simple Interactive To-Do List with Drag and Drop

Written by

javascriptfundamentals

in

Tired of static to-do lists that just sit there? Ready to create a dynamic, interactive experience that lets users effortlessly manage their tasks? In this tutorial, we’ll build a React JS to-do list with a key feature: drag-and-drop functionality. This allows users to reorder tasks with a simple drag, enhancing usability and making task management a breeze. This is a project that’s perfect for beginners and intermediate developers looking to expand their React skills. We’ll break down the process step-by-step, ensuring you understand each concept and can apply it to your own projects.

Why Drag-and-Drop?

Drag-and-drop isn’t just a fancy feature; it significantly improves user experience. Think about it: reordering tasks in a static list requires multiple clicks or tedious data entry. Drag-and-drop offers an intuitive, visual way to prioritize and organize tasks. It mimics real-world interactions, making your application feel more natural and user-friendly. In today’s world of responsive design and touch-screen devices, drag-and-drop is even more critical for a seamless user experience.

What You’ll Learn

By the end of this tutorial, you’ll be able to:

  • Set up a basic React application.
  • Create and manage to-do list items.
  • Implement drag-and-drop functionality using a library.
  • Understand how to update the state of your application based on user interactions.
  • Handle user input and dynamically render components.

Prerequisites

Before we begin, make sure you have the following:

  • Node.js and npm (or yarn) installed on your machine.
  • A basic understanding of HTML, CSS, and JavaScript.
  • A code editor (like VS Code, Sublime Text, or Atom).

Step 1: Setting Up Your React Project

Let’s start by creating a new React project using Create React App. Open your terminal and run the following command:

npx create-react-app react-todo-drag-drop
cd react-todo-drag-drop

This will create a new React project named “react-todo-drag-drop” and navigate you into the project directory. Next, start the development server:

npm start

This will open your React app in your default web browser, usually at http://localhost:3000.

Step 2: Install the React Beautiful DnD Library

For drag-and-drop functionality, we’ll use a popular and well-maintained library called “react-beautiful-dnd”. This library provides a simple and elegant way to implement drag-and-drop in your React applications. Install it using npm or yarn:

npm install react-beautiful-dnd

Step 3: Clean Up the Default App Component

Open the `src/App.js` file and remove the boilerplate code generated by Create React App. Replace it with the following basic structure:


import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

function App() {
  const [tasks, setTasks] = useState([]);

  return (
    <div>
      <h1>My To-Do List</h1>
      {/* To-do list items will go here */}
    </div>
  );
}

export default App;

We’ve imported the necessary components from `react-beautiful-dnd` and initialized an empty `tasks` array using the `useState` hook. We’ve also added a basic heading for our to-do list.

Step 4: Create a Task Component

Let’s create a simple component to represent each to-do list item. Create a new file named `src/Task.js` and add the following code:


import React from 'react';

function Task({ task, index, provided, innerRef }) {
  return (
    <div style="{{">
      {task.text}
    </div>
  );
}

export default Task;

This `Task` component receives a `task` object (containing the task text), an `index` (for its position in the list), and `provided` and `innerRef` from `react-beautiful-dnd`. It renders the task text inside a div that we’ll style later. The `…provided.draggableProps` and `…provided.dragHandleProps` are crucial for making the element draggable. We also apply basic styling to the task item for better visual appearance.

Step 5: Implement the To-Do List Items in App.js

Now, let’s go back to `src/App.js` and add the logic to display the tasks. Modify the `return` statement within the `App` component as follows:


import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import Task from './Task';

function App() {
  const [tasks, setTasks] = useState([
    { id: '1', text: 'Grocery Shopping' },
    { id: '2', text: 'Walk the dog' },
    { id: '3', text: 'Do Laundry' },
  ]);

  const onDragEnd = (result) => {
    if (!result.destination) {
      return;
    }

    const reorderedTasks = Array.from(tasks);
    const [removed] = reorderedTasks.splice(result.source.index, 1);
    reorderedTasks.splice(result.destination.index, 0, removed);

    setTasks(reorderedTasks);
  };

  return (
    <div>
      <h1>My To-Do List</h1>
      
        
          {(provided) => (
            <div>
              {tasks.map((task, index) => (
                
                  {(provided) => (
                    
                  )}
                
              ))}
              {provided.placeholder}
            </div>
          )}
        
      
    </div>
  );
}

export default App;

Here’s what’s happening:

  • We import the `Task` component.
  • We initialize the `tasks` state with some sample to-do items. Each task has an `id` and `text`.
  • We wrap our to-do list in a `DragDropContext`. This is the top-level component that enables drag-and-drop functionality.
  • We use a `Droppable` component to define the area where tasks can be dropped. We give it a unique `droppableId` (‘tasks’ in this case).
  • Inside the `Droppable`, we map over the `tasks` array and render each task using the `Draggable` component. The `Draggable` component needs a unique `key`, `draggableId`, and `index`.
  • The `Task` component is used to render the individual task items, passing the necessary props provided by `react-beautiful-dnd`.
  • The `onDragEnd` function is crucial. It’s called when the user finishes dragging an item. Inside this function, we update the `tasks` state to reflect the new order.

Step 6: Styling the Application

Let’s add some basic styling to make our to-do list look better. Open `src/App.css` and add the following styles:


.app {
  font-family: sans-serif;
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

/* Optional: Add styles to highlight when dragging */
.app .dragging {
  background-color: #eee;
  border: 1px dashed #bbb;
}

Also, add the following CSS to the `Task.js` file, in the `style` section:


  style={{
    ...provided.draggableProps.style,
    marginBottom: '10px',
    padding: '10px',
    border: '1px solid #ccc',
    backgroundColor: '#fff',
    // Add this to change the style when dragging
    ...(snapshot.isDragging ? { backgroundColor: '#eee', border: '1px dashed #bbb' } : {}),
  }}

These styles provide a basic layout, centering the content and adding some padding. The optional `.dragging` class provides a visual cue when an item is being dragged.

Step 7: Adding New Tasks (Input and State Management)

Let’s add the functionality to add new tasks to the list. Modify `src/App.js` to include an input field and a button. Add the following code inside the `return` statement, above the `DragDropContext`:


  const [newTaskText, setNewTaskText] = useState('');

  const handleInputChange = (event) => {
    setNewTaskText(event.target.value);
  };

  const handleAddTask = () => {
    if (newTaskText.trim() !== '') {
      const newTask = { id: Date.now().toString(), text: newTaskText };
      setTasks([...tasks, newTask]);
      setNewTaskText('');
    }
  };

  return (
    <div>
      <h1>My To-Do List</h1>
      <div>
        
        <button>Add</button>
      </div>
      {/* ... (DragDropContext and other code) */}
    </div>
  );

Also, add the following CSS to the `App.css` file:


.input-container {
  display: flex;
  margin-bottom: 10px;
}

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

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

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

Here’s what we added:

  • `newTaskText`: A state variable to hold the text entered in the input field.
  • `handleInputChange`: Updates the `newTaskText` state whenever the input field changes.
  • `handleAddTask`: Adds a new task to the `tasks` array when the “Add” button is clicked. It generates a unique `id` using `Date.now().toString()`.
  • An input field and a button for adding new tasks.

Step 8: Deleting Tasks

Let’s add the ability to delete tasks. We will add a delete button next to each task. Modify `src/Task.js` to include a delete button:


import React from 'react';

function Task({ task, index, provided, innerRef, onDelete }) {
  return (
    <div style="{{">
      <span>{task.text}</span>
      <button> onDelete(task.id)} style={{ backgroundColor: 'red', color: 'white', border: 'none', padding: '5px 10px', borderRadius: '4px', cursor: 'pointer' }}>Delete</button>
    </div>
  );
}

export default Task;

Also, modify `src/App.js` to pass the `onDelete` function to the `Task` component and implement the deletion logic:


import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import Task from './Task';

function App() {
  const [tasks, setTasks] = useState([
    { id: '1', text: 'Grocery Shopping' },
    { id: '2', text: 'Walk the dog' },
    { id: '3', text: 'Do Laundry' },
  ]);
  const [newTaskText, setNewTaskText] = useState('');

  const handleInputChange = (event) => {
    setNewTaskText(event.target.value);
  };

  const handleAddTask = () => {
    if (newTaskText.trim() !== '') {
      const newTask = { id: Date.now().toString(), text: newTaskText };
      setTasks([...tasks, newTask]);
      setNewTaskText('');
    }
  };

  const onDelete = (taskId) => {
    setTasks(tasks.filter(task => task.id !== taskId));
  };

  const onDragEnd = (result) => {
    if (!result.destination) {
      return;
    }

    const reorderedTasks = Array.from(tasks);
    const [removed] = reorderedTasks.splice(result.source.index, 1);
    reorderedTasks.splice(result.destination.index, 0, removed);

    setTasks(reorderedTasks);
  };

  return (
    <div>
      <h1>My To-Do List</h1>
      <div>
        
        <button>Add</button>
      </div>
      
        
          {(provided) => (
            <div>
              {tasks.map((task, index) => (
                
                  {(provided, snapshot) => (
                    
                  )}
                
              ))}
              {provided.placeholder}
            </div>
          )}
        
      
    </div>
  );
}

export default App;

Here’s what we added:

  • Added the `onDelete` function to `App.js`. This function filters out the task with the matching `taskId`.
  • Passed the `onDelete` function to the `Task` component.
  • Added a delete button inside the `Task` component that calls the `onDelete` function when clicked.

Step 9: Handling Empty List State

It’s good practice to handle the empty state of the to-do list. Let’s add a message to display when there are no tasks. Modify the `src/App.js` file, inside the `Droppable` component, before the `tasks.map()` function:


  {(provided) => (
    <div>
      {tasks.length === 0 && <p>No tasks yet. Add one!</p>}
      {tasks.map((task, index) => (
        // ... (Draggable and Task components)
      ))}
      {provided.placeholder}
    </div>
  )

Now, if the `tasks` array is empty, a message “No tasks yet. Add one!” will be displayed.

Step 10: Accessibility Considerations

While drag-and-drop significantly enhances the user experience, it’s crucial to consider accessibility. Not all users can use a mouse or touch screen. Here are some accessibility improvements you can make:

  • **Keyboard Navigation:** Ensure that users can reorder tasks using the keyboard. `react-beautiful-dnd` provides built-in keyboard navigation support, so users can tab to tasks and use the arrow keys to move them. Test this to ensure it works as expected.
  • **Screen Reader Compatibility:** Screen readers should announce the task items and their current position. `react-beautiful-dnd` handles this by default, but you should test with a screen reader to ensure the experience is smooth. Make sure the task text is clearly announced and the user understands the task’s position within the list.
  • **Provide Visual Cues:** Ensure there are clear visual cues to indicate the selected task and its new position during drag-and-drop. The styling we added in Step 6 helps with this.

Step 11: Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • **Incorrect `index` in `Draggable`:** Make sure the `index` prop in the `Draggable` component correctly represents the item’s position in the `tasks` array. This is crucial for drag-and-drop to function correctly.
  • **Missing `provided.placeholder`:** The `provided.placeholder` element within the `Droppable` component is essential. It’s a placeholder for the dragged item, and without it, the drag-and-drop functionality will not work. Make sure it’s included inside the `Droppable`’s `div`.
  • **Incorrect State Updates in `onDragEnd`:** The `onDragEnd` function is where the magic happens. Make sure you’re correctly updating the `tasks` state to reflect the new order. Debug your `onDragEnd` function by logging the `result` object to understand what’s happening.
  • **Styling Issues:** If the drag-and-drop isn’t visually working, check your styling. Ensure that the `provided.draggableProps.style` is applied to the draggable element and that you haven’t overridden any essential styles. Also, double-check that you’ve installed the `react-beautiful-dnd` library correctly.
  • **Library Version Conflicts:** Ensure you are using a compatible version of `react-beautiful-dnd`. If you encounter issues, try updating or downgrading the library to a stable version.

Key Takeaways and Best Practices

Here’s a recap of the key takeaways and best practices:

  • **Use a Library:** Leverage libraries like `react-beautiful-dnd` to handle the complexities of drag-and-drop. It saves you time and effort.
  • **State Management:** Understand how to update your React component’s state based on user interactions, especially in the `onDragEnd` function.
  • **Component Structure:** Break down your UI into reusable components (like `Task`) to keep your code organized and maintainable.
  • **Accessibility:** Always consider accessibility when implementing interactive features like drag-and-drop. Ensure your application is usable by everyone.
  • **Testing:** Test your application thoroughly to ensure drag-and-drop works as expected across different browsers and devices.

FAQ

Here are some frequently asked questions:

  1. Can I use this drag-and-drop functionality with other types of data? Yes! You can adapt this technique to reorder any list of data. Just change the `tasks` array to hold your data and modify the `Task` component to display the appropriate information.
  2. How can I save the order of the tasks permanently? You’ll need to store the order of the tasks in a database or local storage. When the user reorders the tasks, update the database or local storage accordingly. You can use the `useEffect` hook to trigger an update when the `tasks` state changes.
  3. Can I customize the appearance of the drag-and-drop effect? Yes! You can customize the styling of the draggable element using the `provided` object. You can change the background color, add shadows, or animate the transition.
  4. What if I want to drag items between different lists? `react-beautiful-dnd` supports dragging items between different droppable areas. You’ll need to modify the `onDragEnd` function to handle the different source and destination droppable areas and update the state accordingly.
  5. Is this library compatible with touch devices? Yes, `react-beautiful-dnd` is designed to work well on touch devices. Users can drag and reorder tasks using their fingers.

By following this tutorial, you’ve not only built a functional to-do list with drag-and-drop but also learned valuable skills in React development. You’ve seen how to use external libraries to enhance your application’s functionality, manage state effectively, and create a more engaging user experience. The principles you’ve learned here can be applied to a wide range of projects, so keep experimenting and building!

More posts