React Drag and Drop Sortable List

In case you’d like to replicate the structure, you can use this reference image.
import React, { forwardRef } from "react";// as react-beautiful-dnd const Comments = forwardRef(({ children, ...props }, ref) => {return (<ul ref={ref} className="comments">{children}</ul>);});export default Comments;
import React, { forwardRef } from "react";import { GrDrag } from "react-icons/gr";//for formatting dateimport moment from "moment";
const Comment = forwardRef(({ comment, date, id, dragHandleProps, snapshot, ...props }, ref) => {return (<liref={ref}{...props}className={"comment card p-2 my-2 " + (snapshot.isDragging ? "hovering" : "")}><div className="d-flex align-items-top"><span {...dragHandleProps}><GrDrag /></span><small className="ml-2 text-dark">{comment}</small></div><div className="text-muted text-right"><small>{moment(date).format("DD/mm/yyyy")}</small></div></li>);});export default Comment;

Integrating the components:

return (...{/* rendering comments */}<DragDropContext onDragEnd={dragEnded}>
<Droppable droppableId="comments-wrapper">
{(provided, snapshot) => (
<Comments ref={provided.innerRef} {...provided.droppableProps}>{comments.map((_comment, index) => {return (
<DraggabledraggableId={`comment-${_comment.id}`}index={index}key={_comment.id}>{(_provided, _snapshot) => (<Commentref={_provided.innerRef}
dragHandleProps={_provided.dragHandleProps}
{..._provided.draggableProps}snapshot={_snapshot}{..._comment}/>)}</Draggable>);})}{provided.placeholder}</Comments>)}</Droppable></DragDropContext></div></div>);};export default App;

--

--

--

Arbaz is a MERN Stack developer, aiming to make learning programming accessible and straight forward

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Initializing Esbuild-WASM

How To Use JavaScript In 2022!

Do you want to migrate from Ionic to React Native? I can help

Ionic to React Native Roadmap

What’s New In The Latest Version Of React Native v0.68?

We’re back! Let’s Make A Package!

Devlog 1: Ejecting from Expo

Webpack vs Rollup vs Parcel vs Browserify — Bundle size, build time, ease of use comparison

Intro to ES6 and Functional programming in JavaScript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Arbaz Ajaz

Arbaz Ajaz

Arbaz is a MERN Stack developer, aiming to make learning programming accessible and straight forward

More from Medium

Create a controlled Form in React

Controlled forms

What does it mean to have different values in React (JavaScript)?

Some Changes in React Router v6

What to learn in react for beginners?