React-dnd element style is not updated on drag move

Question

I have adapted react-dnd sortable example to use inside of my application.

I can't make the "opacity" to follow my drag.

When I initially pick the element up opacity is applied:

But when I move it up to change the position opacity is still applied to the original DOM element(?).

State is changed accordingly, columns in a table associated with this state are being reordered. So apart of opacity everything else is working fine.

When I move the elements around only the values of the li are being changed but the data-reactid are not changing positions.

The only difference in my app is the way how I manage the state. In my application state is managed via redux.

The hover function that is passed in to the DropTarget is basically copy and paste from the example.

SortableColumnEntry component:

class SortableColumnEntry extends Component {
  render(){
    const { connectDragSource, connectDropTarget } = this.props
    const { column, isDragging, index } = this.props

    const opacity = isDragging ? 0 : 1

    const element = connectDropTarget(connectDragSource(
      <li
        style={{opacity: opacity}}</li>
    ))

    return element
  }
}

export default flow(
  DragSource(DragTypes.COLUMN, source, (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  })),
  DropTarget(DragTypes.COLUMN, target, (connect) => ({
    connectDropTarget: connect.dropTarget()
  }))
)(SortableColumnEntry)

Answer 1

OK I finally sorted it.

There was a problem with a key value I have passed in from a parent component.

I used to base that key on the index which was changing with the element.

Thats how I used to do it:

const columnTags = columns.map(
  (column, index) => 
    <SortableColumnEntry 
    key={index} 
    index={index}
    column={column} />)

When I changed it to stay unique and associated to the state:

const columnTags = columns.map(
  (column, index) => 
    <SortableColumnEntry 
      key={column} 
      index={index}
      column={column} />)

It all started to work.

At the moment the column values are unique and associated with a single entry - later on it would be good to add id field to the state.