How to solve invarient failed error in react

Question

I am trying to build a drag and drop list for my react project. I am using the react-beautiful-dnd library. But I am facing this error:

Error: Invariant failed: Could not find required context

I figured out that it is the draggable component that is throwing this error

<Draggable draggableId={props.id} index={props.index}>
{(provided, snapshot) => (
<div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
   Some code goes in here....
</div>
)}

<Draggable/>

Then I found this github issue: https://github.com/atlassian/react-beautiful-dnd/issues/948 According to a solution suggested here I added a style function

const getStyle = (style, snapshot, backgroundColor) => {
    return {
      ...style,
      borderBottomColor: backgroundColor,
      backgroundColor: `${backgroundColor}`,
    };
  };

And then added the style to the div

<Draggable draggableId={props.id} index={props.index}>
{(provided, snapshot) => (
<div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} style= 
{getStyle(provided.draggableProps.style, snapshot)>
   Some code goes in here....
</div>
)}
<Draggable/>

But still, I am not able to solve the issue...What can I do to resolve this issue?

Harmonie

Answer 1

I ran into the same issue. Came out with the following solution:

From the Draggable docs 🚀,

<Draggable /> components can be dragged around and dropped onto <Droppable />s. 
A <Draggable /> must always be contained within a <Droppable />."

Try wrapping your Draggable components with Droppable, like this

    <DragDropContext onDragEnd={onDragEnd}>
        <Droppable droppableId="some_id">
          {provided => (
            <div ref={provided.innerRef} {...provided.droppableProps}>
              <Draggable draggableId={props.id} index={props.index}>
                {(provided, snapshot) => (
                  <div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
                    Some code goes in here....
                  </div>
                )}
              </Draggable>
            </div>
          )}
        </Droppable>
      </DragDropContext>      

Ponzo

Answer 2

in dnd-beautiful-react library-

a. the most outer component (that is 'context') is

b. inside , components are present which are basically the areas where we want to implement drag-n-drop facility.

c. inside component there are components which are the actual components that will be dragged and dropped.

so now see in this case, react is unable to find the context component (most outer component) in your code.check for that.

in my case i had three places where i was using my droppable component but i had only used context in one component... so it was missing in two other. i simply commented out those components and now it runs fine..

you should include in all places where you are using your droppable components.

Cerium