Search code examples
javascriptreactjsgantt-chart

What could be causing the 'Received NaN for the width attribute' error in gantt-task-react while adding tasks dynamically in React?

 Received NaN for the `width` attribute. If this is expected, cast the value to a string.
    at rect
    at g
    at BarDisplay2 (http://127.0.0.1:5173/node_modules/.vite/deps/gantt-task-react.js?v=a26a2daa:1229:16)
    at g
    at Bar2 (http://127.0.0.1:5173/node_modules/.vite/deps/gantt-task-react.js?v=a26a2daa:1279:19)
    at g
    at TaskItem2 (http://127.0.0.1:5173/node_modules/.vite/deps/gantt-task-react.js?v=a26a2daa:1428:41)
    at g
    at g
    at TaskGanttContent2 (http://127.0.0.1:5173/node_modules/.vite/deps/gantt-task-react.js?v=a26a2daa:1499:20)
    at svg
    at div
    at div
    at TaskGantt2 (http://127.0.0.1:5173/node_modules/.vite/deps/gantt-task-react.js?v=a26a2daa:1721:24)
    at div
    at div
    at Gantt2 (http://127.0.0.1:5173/node_modules/.vite/deps/gantt-task-react.js?v=a26a2daa:1789:20)
    at div
    at div
    at App (http://127.0.0.1:5173/src/App.tsx?t=1685524513378:21:31)

I am getting this error while using the gantt-task-react library for creating the gantt chart dynamically for the specified array of objects. It is not showing this error, but when I create a new task dynamically through the form, it is giving this error. Is there any way to avoid this error?

I read the whole documentation but didn't get any ideas on how to resolve it.

Solution

  • The progress is also a required field, but you do not provide it for the new task.

    You should add a progress: 0, property in the val when you create the new Task in AddTask component.

    Updated demo: https://codesandbox.io/p/sandbox/distracted-bush-ikhtsq