Learning React Beautiful DnD basics without building Trello Clone

Question

I want to learn React Beautiful Dnd by coding two div boxes that contain child elements I can drag between them. All (most?) tutorials online are Trello clones with loops and state that clutter my understanding of the basics. I want to simplify my understanding by hard coding only the most minimal state required with the end result being two components (the component name is "Column") each that contain a div (A component named "Task") that I can drag to the other.

At the moment. I am getting the error " TypeError: children is not a function ".

Here is my code:

src/App.js

import {DragDropContext} from 'react-beautiful-dnd';

import Column from './Components/Column';

function App() {



  return (
    <DragDropContext onDropEnd={result => console.log("my life is worth more than this")}>


       <Column id="1"/>

    </DragDropContext>

  );
}

export default App;

src/Components/Column

import React from 'react';
import {Droppable} from 'react-beautiful-dnd';
import Task from "../../Components/Task"

function Column(props){
   const { classes, id } = props;

   let style = {
    backgroundColor:"orange",
    height:"100px",
    width:"100px",
    margin:"100px"

   }
    return (

       <Droppable droppable = {id}>
       {provided => (

          <div {...provided.droppableProps} ref={provided.innerRef} style={style}>
            Column is orange task is red 
            <Task id="1"/>
            <Task id="2"/>
            {provided.placeholder}
          </div>
        )

       }

       </Droppable>
    )
}

export default Column

src/Components/Task

import React from 'react';
import {Draggable} from 'react-beautiful-dnd';



function Task(props){
      const { classes, id } = props;

    return (
       <Draggable draggableId ={id}>

       <div>
        some task
       </div>

       </Draggable>
    )
}

export default Task

William · Answer 1 · 2020-01-29T05:45:41.040

Here is a basic working example of simply dragging items (in case anyone is looking for it). I've decided to document my learning here because I feel remedial examples are lacking in the official docs. I like "hello world" examples.

The first thing to realize is that using the library requires understanding three components. Each component has it's respective boilerplate code.

They are (buried down the page) in the official docs.

<DragDropContext />

- Wraps the part of your application you want to have drag and drop enabled for

<Droppable />

- An area that can be dropped into. Contains components

<Draggable />

- What can be dragged around

Your app needs to be wrapped in a single DragDropContext (multiple DragDropContext are not supported). This example has minimal state.The id properties in the state objects are required (they can be named different but are required none the less).

src/App.js

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


import Column from './Components/Column';

function App() {

  const [listOne, setListOne] = useState([{id:"1", title:"Test-1"},{id:"2", title:"Test-2"}]);
  const [listTwo, setListTwo] = useState([{id:"3", title:"Test-3"},{id:"4", title:"Test-4"}]);

  return (
    <DragDropContext onDropEnd={result => console.log(result)}>

       <Column id="1" list = {listOne}/>
       <Column id="2" list = {listTwo}/>

       <div> context hello world </div>

    </DragDropContext>

  );
}

export default App;

<Droppable/> components nest <Draggable/> components. This returned function boiler plate code is required:

{provided => (

)}

Explanation for each property of provided is here

src/Components/Column

import React from 'react';
import {Droppable} from 'react-beautiful-dnd';
import Task from "../../Components/Task"

function Column(props){
   const { classes, id, list } = props;

   let style = {
    backgroundColor:"orange",
    height:"300px",
    width:"400px",
    margin:"100px"

   }

   console.log(list)

    return (

       <Droppable droppableId = {id}>
       {provided => (

          <div {...provided.droppableProps} ref={provided.innerRef} style={style}>

            {list.map((val,index)=>{
               return <Task id={val.id} key={index} index={index} title={val.title}/>
            })}

           {provided.placeholder}
          </div>
        )
       }
       </Droppable>
    )
}

export default Column

src/Components/Task

import React from 'react';
import {Draggable} from 'react-beautiful-dnd';



function Task(props){
    const { classes, id, index,title } = props;
    let style = {
    backgroundColor:"red",


   }

    return (
       <Draggable draggableId ={id} index={index} >

         {(provided) => (
            <div
              ref={provided.innerRef}
              {...provided.draggableProps}
              {...provided.dragHandleProps}
            >
              <h4 style={style}>{title}</h4>
            </div>
        )}

       </Draggable>
    )
}

export default Task

Learning React Beautiful DnD basics without building Trello Clone

1 Answers1