Change style of an element at DragEnd in React beautiful dnd

Keywords: reactjs react-beautiful-dnd


Hello to all i'm tryin to learn react-beautiful-dnd,

I follow all the official tutorial and tried to read the documentation but it's not so clear at all.

But what if i want to render a complex data set ?

Just to understand better my problem:

I've a complex component in react:

<ChangeRequest title="Superframe" requestId="1124" cost="600" supervisor="Jhon Wayne" buttonTitle="valutazione" />

This component have a complex design, plus the data in the props will be dynamic. There is a way to re-use this component in react-beatiful-dnd ? or do i have to rewrite everything following the react-beautiful-dnd logic ?

if i cannot re use it, where can i start to rewrite the content ?

in the tutorial as initialData we used this object:

const initialData = {
  tasks: {
    'task-1': { id: 'task-1', content: 'ciao' },
    'task-2': { id: 'task-2', content: 'contenuto numero 2' },
    'task-3': { id: 'task-3', content: 'contenuto numero 3' },
    'task-4': { id: 'task-4', content: 'contenuto numero 4' },
    'task-5': { id: 'task-5', content: 'contenuto numero 5' },
    'task-6': { id: 'task-6', content: 'contenuto numero 6' },

  columns: {
    'column-1': {
      id: 'column-1',
      title: 'Content Table',
      taskIds: ['task-1', 'task-2', 'task-3', 'task-4', 'task-5', 'task-6'],
    'column-2': {
      id: 'column-2',
      title: 'In Progress',
      taskIds: [],
    'column-3': {
      id: 'column-3',
      title: 'Done',
      taskIds: [],
  columnOrder: ['column-1', 'column-2', 'column-3'],

export default initialData;

in the image below you will see how the initialData content is redered.

enter image description here

and this is the html of the main component

  render() {
    return (
      <DragDropContext onDragEnd={this.onDragEnd}>
        <div className="columnDnDFlex">
        { columnId => {
          const column = this.state.columns[columnId];
          const tasks = => this.state.tasks[taskId])

          return <Column className="columnDnDFlexItem" key={} column={column} tasks={tasks} />