DOMException when tasks array is empty

[phtmgt]

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

This happens when tasks goes empty ([], length 0, you get the point).

This renders the whole thing useless.

{
    this.state.tasks.length
        ?
        <ReactGantt 
            tasks={this.state.tasks}
        />
        :
        <p>{this.props.t('info.emptyProjectProgress')}</p>
}

As soon as state.tasks.length goes to 0, everything goes bust.

[phtmgt]

Workaround:

Wrap the component in a div like this:

{
    this.state.tasks.length
        ?
        // div is NEEDED! Otherwise, we get Uncaught DOMException when tasks.length goes to 0!!! See https://www.newventuresoftware.com/blog/react---resolving-error-the-node-to-be-removed-is-not-a-child-of-this-node
        <div>
            <ReactGantt 
                tasks={this.state.tasks}
            />
        </div>
        :
        <p>{this.props.t('info.emptyProjectProgress')}</p>
}

I am not closing the issue, as this is a messy way of solving it. Maybe someone will come up with a better way to tackle this inside 'gantt-for-react'. Plus, someone might experience a similar issue.

[qiushi0908]

I have the same problem. @plamenh 's method can solve the problem.