Either that or I have absolutely no idea what I’m doing. Here is the link to the “hello world” I’m following: https://dhtmlx.com/blog/create-react-gantt-chart-component-dhtmlxgantt/
So the first problem I encountered was easy enough to fix (most of them are, but I’ve done very little jscript/react so there are some I still haven’t been able to debug):
- This block of code, on the website, references “data” but I think it should be “tasks:”
export default class Gantt extends Component {
componentDidMount() {
gantt.config.xml_date = “%Y-%m-%d %H:%i”;
const { tasks } = this.props;
gantt.init(this.ganttContainer);
gantt.parse(data);
}
- There are several errors where the include includes ./ instead of ./components/ (the directory structure prescribed is to have a components directory, unless I’m misunderstanding the walkthrough). For example:
import Toolbar from ‘…/Toolbar’;
should be
import Toolbar from ‘./components/Toolbar’;
-
This is a combination of the example not working and my inexperience with jscript/react, but after performing the “days” “hours” “weeks” radio button portion of the work, updating it does nothing to redraw the gannt chart. At the top of the “setZoom” function in the Gantt class I can hardcode value = ‘Hours’ to get the desired redraw but I’m unable to capture the output of the radio button.
-
class MessageArea extends Component should be export default class MessageArea extends Component
-
I cannot get the last portion (MessageArea) to work. The compiler complains messages is undefined in render method within app.js. I THINK there needs to be, at the top, a line added:
const { messages } = this.state;
However, with this change I still get an error message that “JSON is not supported”
There are other things I fixed (or broke?) as I walked through the example, but in short, the example code does not work as stated. Can someone take a look at it and fix it (or at least helpe me through the 2 unsolved questions above)?
Thanks!