React Beautiful dnd converting functional componentings

Question

I'm trying to convert beautiful-dnd to functional components and split them into different components but I'm just wondering why this is throwing an error?

Thanks,

Answer 1

There was an issue in task.js. You forgot to spread the provided.dragHandleProps

import React from 'react'
import { Draggable } from 'react-beautiful-dnd'

const Task = props => {
  console.log(props)
  return (
    <Draggable draggableId={props.task.id} index={props.index}>
      {(provided, snapshot) => (
        <div
          ref={provided.innerRef} // <-- this as well
          {...provided.draggableProps}
          {...provided.dragHandleProps} // <-- here
        >
          {props.task.content}
        </div>
      )}
    </Draggable>
  )
}

export default Task