simple list in react beautiful dnd not working

Question

I've been following the official course on egghead (https://egghead.io/lessons/react-reorder-a-list-with-react-beautiful-dnd and sample working code: https://codesandbox.io/s/52p60qqlpp) and wrote this:

https://codesandbox.io/s/00k3rwq3qn

However, it doesn't actually drag and drop. I've looked through several examples, and I can't spot the issue in my code. I would really appreciate someone feedback on what my mistake is.

Thanks

Ian Loubser · Accepted Answer · 2019-03-21T21:25:21.877

I don't think using inline styles work that well with Draggable in react-beautiful-dnd. If you want to apply styling to the Task component you should use styled-components, this sample shows it working if you remove the inline style configuration https://codesandbox.io/s/6lq0854m6r.

Rather use the styled-components

import React from "react";
import styled from "styled-components";
import { Draggable } from "react-beautiful-dnd";

const Container = styled.div`
  margin: 10px;
  border: 1px solid black;
`;

export default class Task extends React.Component {
  render() {
    return (
      <Draggable draggableId={this.props.task.id} index={this.props.index}>
        {(provided, snapshot) => (
          <Container
            {...provided.draggableProps}
            {...provided.dragHandleProps}
            ref={provided.innerRef}
          >
            {this.props.task.content}
          </Container>
        )}
      </Draggable>
    );
  }
}

EDIT: It seems you can apply inline styles to the draggable, but then you should extend the DraggableProps.styles within the child function of the Draggable component, see here.

{(provided, snapshot) => (
    const style = {
        margin: "10px",
        border: "1px solid black",
        ...provided.draggableProps.style,
    };
    return <div
        {...provided.draggableProps}
        {...provided.dragHandleProps}
        ref={provided.innerRef}
        style={style}
        >
        {this.props.task.content}
    </div>
)}

Thanks Ian, I didn't realize inline styles caused conflict with dnd. For future note, className/css files work just fine. — Saad, Mar 21 '19 at 21:23
Awesome, see my edit above about using inline styles, you just have to extend the draggable styles if you prefer inline styles :). — Ian Loubser, Mar 21 '19 at 21:24
@IanLoubser is correct. You are welcome to use inline styles, you just need to be sure to apply the draggable inline styles - author of `react-beautiful-dnd` — alexreardon, Mar 26 '19 at 23:07
For anyone that encountered the draggables' not moving with no errors shown, this might be the solution. Thank you Ian — Lala, Sep 22 '21 at 07:26

score 1 · Answer 2 · answered Feb 12 '20 at 12:25

@Ian 's answer did not work well for me.So I checked the react-beautiful-dnd's documents and came up with another workaround to solve the issue:

const styles = {
  backgroundImage: `url(${background.MEDIUM})`,
  backgroundSize: 'cover',
};

...

  {(provided) => {
    const otherProps = {
      ...provided.draggableProps,
      style: {
        ...provided.draggableProps.style,
        ...styles,
      },
    };
    return (<div
        {...otherProps}
        {...provided.dragHandleProps}
        ref={provided.innerRef}
        >
        {this.props.task.content}
    </div>)
  }}

score 0 · Answer 3 · answered May 11 '21 at 15:12

If you are trying to build draggable list with React functional component using official document and not using styled-components library then it want work. It will give you some error. So apply style using className attribute and then error will go away and also code will start working.

simple list in react beautiful dnd not working

3 Answers3