Code in example has many issues

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):

  1. 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);
}

  1. 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’;

  1. 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.

  2. class MessageArea extends Component should be export default class MessageArea extends Component

  3. 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!

Hi @MSIScott!

Thanks for noticing and sorry for the inconveniences.
You’re absolutely right.
We’ve updated the demo app some time ago GitHub - DHTMLX/react-gantt-demo: dhtmlxGantt with ReactJS and after that, we updated the tutorial in order to reflect the changes. Looks like we’ve left some major issues there

Here is a complete demo, which should work properly, you can check code there

We’ll now review the tutorial and make necessary corrections. I’ll post you an update after that

Thanks! I cloned the repo and had no trouble getting it up and running. I’ll take a look at the details now and start tweaking some things.