Trying to create a draggable table/list and it gives me error saying 'provided.innerRef has not been provided with a HTMLElement.'

Question

I am trying to create a draggable list using Material UI and react-beautiful-dnd. I followed the tutorial on their page and created this-

function DraggableList(props) {
  const { classes, tableHeaders, tasksList } = props;
  return (
    <div>
      <Droppable droppableId="id">
       {(provided) => (
         <div ref={provided.innnerRef} {...provided.droppableProps}>  
           {tasksList && tasksList.slice(0,5).map((row, index) => (
              <Draggable draggableId={row.id} index={index}>
                {(provided)=> (
                  <div index={index} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}> 
                    <Paper className={classes.root} key={row.id}>
                      <Grid container xs={12} className={classes.topContainer}>
                        <Grid item xs={2}>
                          <IconButton><DragIndicatorIcon className={classes.dragIcon}/></IconButton> </Grid>
                        <Grid item xs={10}>
                          <Typography className={classes.activity} variant="body2">{row.name}</Typography>
                        </Grid>
                      </Grid>
                    </Paper>
                   </div>
                )}
              </Draggable>
            ))}
          </div>
        )}
      </Droppable>
    </div>
  );
}

It keeps giving me

Error: Invariant failed: 
    provided.innerRef has not been provided with a HTMLElement.

    You can find a guide on using the innerRef callback functions at:
    https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/using-inner-ref.md

error though I am setting innerRef on a 'div' . What is the mistake here

score 3 · Answer 1 · answered Nov 28 '19 at 02:37

3

Typo:

ref={provided.innnerRef}

answered Nov 28 '19 at 02:37

asliwinski

1,662
3
21
38

score 1 · Answer 2 · answered Jun 17 '20 at 12:57

I had the same problem, but my solution was quite different. I made the silly mistake of using curly bracket instead of parentheses. So I did:

{(provided) => {

And not:

{(provided) => (

No error indications whatsoever other than "provided.innerRef has not been provided with a HTMLElement."

score 0 · Answer 3 · answered Oct 03 '19 at 07:59

0

You put

provided={provided}

in the same div it will start working. I also had the same issue but it got resolved with this.

answered Oct 03 '19 at 07:59

SatyaDash

190
5

score 0 · Answer 4 · answered Apr 29 '21 at 10:14

I had the same problem and I used styled-components. I just set the ref prop on the styled-component element and it worked for me.

I mean this:

const StyledElement = styled.div`
   //the css goes in here
`; 

<StyledElement ref={provided.innerRef} {...provided.droppableProps}>
   //The rest of the code goes here
<StyledElement/>

Trying to create a draggable table/list and it gives me error saying 'provided.innerRef has not been provided with a HTMLElement.'

4 Answers4