How to implement Drag and Drop in Class based Component in react-dnd

Question

I am new to react and trying to implement drag and drop with react-dnd. However I cant use hooks in class based components. I am getting an error due to the below portion of the code.

 const [{ isDragging }, drag] = useDrag({
           item: { type: ItemTypes.Student },
          collect: (monitor) => ({
            isDragging: !!monitor.isDragging(),
          }),
        });

How can I implement the same functionality while still using class based components? Below is the full code

class App extends Component {
  state = {
    values: [],
  };
const [{ isDragging }, drag] = useDrag({
      item: { type: ItemTypes.Student },
      collect: (monitor) => ({
        isDragging: !!monitor.isDragging(),
      }),
    });

  divStyle = {
    "margin-left": "20px",
  };

  componentDidMount() {
    axios.get("http://localhost:5000/api/student").then((response) => {
      this.setState({
        values: response.data,
      });
    });
  }

  render() {

    return (
      <div
        ref={drag}
        style={{
          opacity: isDragging ? 0.5 : 1,
          fontSize: 25,
          fontWeight: "bold",
          cursor: "move",
        }}
      >
        <Header as="h2">
          <Icon name="users" />
          <Header.Content>Reactivities</Header.Content>
        </Header>

        {this.state.values.map((student: any) => (
          <DndProvider backend={Backend}>
            <List key={student.id} relaxed>
              <List.Item>
                <Image
                  style={this.divStyle}
                  avatar
                  src="https://react.semantic-ui.com/images/avatar/small/daniel.jpg"
                />
                <List.Content>
                  <List.Header as="a">
                    {student.firstName} {student.lastName}
                  </List.Header>
                  <List.Description></List.Description>
                </List.Content>
              </List.Item>
            </List>
          </DndProvider>
          //  <List.Item key={value.id}>{value.name}</List.Item>
        ))}
      </div>
    );
  }
}

export default App;

score -1 · Answer 1 · answered Mar 31 '22 at 10:27

-1

You can't use hooks inside a class component, as explained here: https://reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both

You can’t use Hooks inside a class component, but you can definitely mix classes and function components with Hooks in a single tree. Whether a component is a class or a function that uses Hooks is an implementation detail of that component. In the longer term, we expect Hooks to be the primary way people write React components.

As a consequence, if you want to use this library, you will need to refactor your component to be a function component.

answered Mar 31 '22 at 10:27

Ernesto

439
4
12

There is an older API for react-dnd which is still supported that works with class components. It’s not well documented any more but it’s there. I rely on it. – Ken Lyon Jan 15 '23 at 23:22
To clarify, I shouldn't say "still supported" but it is available. You must use react-dnd v14 or earlier in order to be able to use it with class components. They refer to it as the Decorators API and it was dropped in v15. Here's where the examples are: https://github.com/react-dnd/react-dnd/tree/v14.0.3/packages/examples-decorators/src Another solution is to place a functional component directly in the root of your class component and use it as the drag source and/or drop target. It could accept the children of the outer component. I did that recently to avoid converting a class to fc. – Ken Lyon Jan 16 '23 at 17:51

How to implement Drag and Drop in Class based Component in react-dnd

1 Answers1