simple list in react beautiful dnd not working

2
votes

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

3
reactjsreact-dndreact-beautiful-dnd

3 Answers

3
votes

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>
)}
1
votes

@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>)
  }}
0
votes

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.