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?

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>