визуализировать компонент в React Beautiful dnd

Question

Привет всем, я пытаюсь научиться реагировать-Beautiful-DDD,

Я следую всем официальным учебным пособиям и пытался прочитать документацию, но это не совсем понятно.

Но что, если я хочу отобразить сложный набор данных?

Просто чтобы лучше понять мою проблему:

У меня сложный компонент в реакции:

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

Этот компонент имеет сложный дизайн, плюс данные в подпорках будут динамическими. Есть ли способ повторно использовать этот компонент в response-beatiful-dnd? или я должен переписать все, следуя логике реагировать-красиво-нд?

если я не могу использовать его повторно, где я могу начать переписывать содержимое?

в уроке как initialData мы использовали этот объект:

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;

на изображении ниже вы увидите, как отображается содержимое initialData.

и это HTML-код основного компонента

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

          return <Column className="columnDnDFlexItem" key={column.id} column={column} tasks={tasks} />
        })}
        </div>
      </DragDropContext>
    );
  }
}