Overall Purpose

Meeru ila start cheyyachu:

"This component implements Drag and Drop functionality using the @hello-pangea/dnd library. It displays two lists: Available Products and Your Cart. Users can reorder products within the same list or move products between the two lists."

Complete Execution Flow

task-26

Application Starts

↓

DragDrop Component Renders

↓

initialProducts Loaded

↓

available State = initialProducts

↓

cart State = []

↓

UI Shows Two Lists

↓

User Starts Dragging

↓

DragDropContext Tracks Drag

↓

User Drops Item

↓

onDragEnd() Executes

↓

Destination Exists?

↓

No → Stop

↓

Yes

↓

Same List?

↓

Yes → reorder()

↓

Update State

↓

React Re-renders

----------------------------

No

↓

Move Item Between Lists

↓

Update Both States

↓

React Re-renders

↓

Updated UI Displayed

Step 1 Imports

import { useState } from "react";

Explanation

"useState is used to manage the component's state. I use it to store the available products list and the cart list."

import {
  DragDropContext,
  Droppable,
  Draggable,
} from "@hello-pangea/dnd";

Explanation

"These components are provided by the @hello-pangea/dnd library. DragDropContext manages the drag-and-drop operation, Droppable defines an area where items can be dropped, and Draggable makes individual items draggable."

Step 2 Product Data

const initialProducts=[...]

Explain:

"This array contains all the initial products. Each product has an id, name, price, and image. This data is used to populate the Available Products list."

Step 3 reorder()

const reorder = (list, startIndex, endIndex) => {

This is a very important function.

Explain:

"This helper function is used when the user rearranges items within the same list. It removes the dragged item from its original position and inserts it into the new position."

First Line

const result = Array.from(list);

Explain:

"I create a copy of the original array because React state should never be modified directly."

Next

const [removed] = result.splice(startIndex, 1);

Explain:

"This removes the dragged item from its old position."

Example

Before

Mouse
Keyboard
Hub

Dragging Keyboard

After removing

Mouse
Hub

Next

result.splice(endIndex,0,removed);

Explain

"Now I insert the removed item into its new position."

Example

Mouse

Keyboard

Hub

↓

Drag Keyboard below Hub

↓

Mouse

Hub

Keyboard

Return

return result;

Explain

"Finally, I return the reordered array."

Step 4 Component Starts

export default function DragDrop()

Explain

"This is the main component responsible for rendering both lists and handling all drag-and-drop operations."

Step 5 State

Available

const [available,setAvailable]

Explain

"This state stores all available products. Initially, it contains the initialProducts array. Whenever products are moved or reordered, this state is updated."

Cart

const [cart,setCart]

Explain

"This state stores products added to the cart. Initially, it is an empty array. When the user drags a product into the cart, it is stored here."

Step 6 onDragEnd()

Most important.

const onDragEnd=(result)=>{

Explain

"This function is automatically called by the library whenever a drag operation ends. It receives a result object containing information about the dragged item, its source, and its destination."

First

const {source,destination}=result;

Explain

"I extract the source and destination information from the result object."

Example

Source

Available

Index 2

↓

Destination

Cart

Index 0

Next

if(!destination)return;

Explain

"If the user drops the item outside any droppable area, destination is undefined. In that case, I stop the function immediately."

Next

const sId=source.droppableId;
const dId=destination.droppableId;

Explain

"Here I identify from which list the item came and into which list it was dropped."

Step 7 Same List

if(sId===dId)

Explain

"If both source and destination are the same list, the user is simply reordering items."

Next

const list=sId==="available"

Explain

"I determine which list is being reordered."

Next

const newList=reorder(...)

Explain

"I call the helper function to generate a reordered array."

Next

setAvailable(newList)

Explain

"I update the Available Products state."

or

setCart(newList)

Explain

"I update the Cart state."

Return

return;

Explain

"Once reordering is completed, there is no need to execute the remaining code."

Step 8 Moving Between Lists

If

Available

↓

Cart

Explain

"If the source and destination are different, I move the item between the two lists."

Copy Arrays

const srcList=[...]
const destList=[...]

Explain

"I create copies of both arrays because React state should be updated immutably."

Remove

const [removed]=srcList.splice(...)

Explain

"I remove the dragged product from the source list."

Destination

const destIndex=

Explain

"If the destination is the cart, I append the item at the end. Otherwise, I insert it at the drop position."

Insert

destList.splice(...)

Explain

"I insert the removed item into the destination list."

Update State

setAvailable(...)
setCart(...)

Explain

"Finally, I update both states. React detects the state change and automatically re-renders the UI."

Step 9 JSX

<DragDropContext

Explain

"DragDropContext wraps the entire drag-and-drop area. It listens for drag events and calls the onDragEnd function when the user finishes dragging."

Step 10 Droppable

<Droppable droppableId="available">

Explain

"This creates a droppable area named 'available'. Products can be dropped into this list."

Step 11 snapshot

snapshot.isDraggingOver

Explain

"This tells whether an item is currently being dragged over the droppable area. I use it to apply a different background color."

Step 12 provided

provided.innerRef

Explain

"The library uses this reference to control the DOM element during drag-and-drop."

{...provided.droppableProps}

Explain

"These props enable drag-and-drop functionality for the droppable container."

Step 13 map()

available.map(...)

Explain

"I loop through all available products and render a Draggable component for each one."

Step 14 Draggable

<Draggable

Explain

"Each product is wrapped inside a Draggable component so it can be dragged."

Step 15

provided.draggableProps

Explain

"These props allow the item to be draggable."

provided.dragHandleProps

Explain

"These props define the area the user can click and drag."

provided.innerRef

Explain

"This connects the DOM element with the drag-and-drop library."

Step 16 Placeholder

{provided.placeholder}

Explain

"The placeholder reserves space while an item is being dragged. Without it, the list layout would collapse and items would jump unexpectedly."

Finally Explain Like This (1-minute Interview Answer)

"When the application starts, the DragDrop component renders with two states: available, which contains the initial products, and cart, which is initially empty. The UI displays two droppable lists. When the user starts dragging an item, DragDropContext tracks the drag operation. Once the user drops the item, the onDragEnd function executes. If the item is dropped outside a valid area, the function exits immediately. If the item is dropped within the same list, the reorder helper rearranges the items and updates the corresponding state. If the item is dropped into a different list, it is removed from the source list, inserted into the destination list, and both states are updated. React then re-renders the component, and the UI reflects the updated product positions automatically.