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.