how to fix multiple codes which throws one error?-CodePudding

i've created react app multiple times downloaded react-beautiful-dnd

wrote code: `

import React from 'react';
import './App.css';

import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

function App() {
  return (
    <div className="App">
      <DragDropContext>
        <Droppable droppableId='thing'>
          {(provided) => {
            <div ref={provided.innerRef} {...provided.droppableProps} >
              <Draggable draggableId={0} index={0}>
                {(provided) => {
                  <div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
                    some
                  </div>
                }}
              </Draggable>
              <Draggable draggableId={0} index={0}>
                {(provided) => {
                  <div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
                    thing
                  </div>
                }}
              </Draggable>
            </div>
          }}
        </Droppable>
      </DragDropContext>
    </div>
  );
}

export default App;

` and seen that: enter image description here;

i've updated npm demoted npm downloaded yarn

created in every new app and downloaded dnd

it appears when i add Droppable

Do you see why ?

what could be a solution ?

CodePudding user response：

You can wrap your ul and li into a return like this in both draggable and droppable.

{ (provided) => { return (<li key={index} index={index} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} > {item.title} </li>); } }

CodePudding user response：

I had this same issue. This is because the styled-components library has changed how it handles ref/innerRef. See their documentation: https://styled-components.com/docs/advanced#refs which states: "Using an older version of styled-components (below 4.0.0) or of React? Use the innerRef prop instead."

The tutorial uses v3.2.6, check the package.json here: https://codesandbox.io/embed/github/eggheadio-projects/react-beautiful-dnd-task-app/tree/lesson-3/?hidenavigation=1

So to fix the error, when using the latest version of style-components (5.3.0), change: innerRef={provided.innerRef} to ref={provided.innerRef}.