Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

147
Vistas
Where to write the logic for drag and drop functionality in React?

I am writing an application similar to Trello for project management. I want to implement the drag and drop functionality from scratch. ( I know there are other libraries already made for this but I want to customize the behavior )

My simplified components look something like this:

import React, { useState } from "react";

const ListsContainer = () => {
  const [data, setData] = useState([]);

  //fetch data and do stuff on it

  return (
    <div className="lists-container">
      {data.forEach((element) => {
        return <List element={element}/>;
      })}
    </div>
  );
};

export default ListsContainer;
import React from "react";

const List = ({ element }) => {
  //display stuff about the list
  return <div className="list"></div>;
};

export default List;

What I want to do is to be able to click on a List, drag it around inside the ListContainer and drop it in place of another. The problem is that I am unsure of where should I write the logic for this functionality. Right now I see 2 possibilities:

  1. Have the logic in the ListContainer component. The List component would be wrapped using React.forwardRef() and the container would have the references to all the List components. This makes sense because the data is part of this component and the <div className = "lists-container"></div> is needed in order to calculate if I dropped a List in a different spot and the order between them needs to change.
  2. Have the logic in the List component. This just feels more natural. The "drag and drop" functionality is specific to the List and it feels like this is the place where the logic should stay. The problem here would be the fact that I have to pass the data as well as a ref to <div className = "lists-container"></div> from ListContainer down to each List in order to determine from inside the List itself whether or not I dropped it in place of another.

There is also most likely a third option to do a combination of these two but I am not 100% sure how to go about it.

So what do you think the best approach is?

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda