reactjs - 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?

question from:https://stackoverflow.com/questions/65851879/how-to-solve-invarient-failed-error-in-react

Answer 1

Waitting for answers