Open jawadkhan0317 opened 7 months ago
the issue i am facing is that when i call gantt chart twice in my app.jsx it is only rendering one time. the second time it is taking the space fr it but not displaying the content
`import React, { Component } from "react"; import Gantt from "./components/Gantt"; import Toolbar from "./components/Toolbar"; import MessageArea from "./components/MessageArea"; import "./App.css"; const data = { data: [ { id: 1, text: "Task #1", start_date: "2020-02-12", duration: 3, progress: 0.6, }, { id: 2, text: "Task #2", start_date: "2020-02-16", duration: 3, progress: 0.4, }, ], links: [{ id: 1, source: 1, target: 2, type: "0" }], }; class App extends Component { state = { currentZoom: "Days", messages: [], }; addMessage(message) { const maxLogLength = 5; const newMessage = { message }; const messages = [newMessage, ...this.state.messages]; if (messages.length > maxLogLength) { messages.length = maxLogLength; } this.setState({ messages }); } logDataUpdate = (type, action, item, id) => { let text = item && item.text ? ` (${item.text})` : ""; let message = `${type} ${action}: ${id} ${text}`; if (type === "link" && action !== "delete") { message += ` ( source: ${item.source}, target: ${item.target} )`; } this.addMessage(message); }; handleZoomChange = (zoom) => { this.setState({ currentZoom: zoom, }); }; render() { const { currentZoom, messages } = this.state; return ( <div> <div className="zoom-bar"> <Toolbar zoom={currentZoom} onZoomChange={this.handleZoomChange} /> </div> <div className="gantt-container"> <Gantt tasks={data} zoom={currentZoom} onDataUpdated={this.logDataUpdate} /> </div> <div className="gantt-container"> <Gantt tasks={data} zoom={currentZoom} onDataUpdated={this.logDataUpdate} /> </div> <MessageArea messages={messages} /> </div> ); } } export default App; `
the issue i am facing is that when i call gantt chart twice in my app.jsx it is only rendering one time. the second time it is taking the space fr it but not displaying the content