gantt-for-react
gantt-for-react copied to clipboard
DOMException when tasks array is empty
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.
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.
I have the same problem. @plamenh 's method can solve the problem.