React JSX inside gantt.templates.task_text

Gantt
#1

Can I use JSX as a return for the gantt.templates.task_text function?

const Div = () => <div>test</div>

gantt.templates.task_text  = function(start,end,task){
            return <Div/>
            
        };
1 Like
#2

Hi,
If you add this code to the js file with the implementation of the component (Gantt.js in our demo) - that wouldn’t work.
While you are working with JSX - you must also use a compiler (for example babel, gulp, webpack etc.) that transforms JSX to JS. If you do that - the provided code should work correctly.

#3

I’m not official. And I have the same question you asked.
But according to below post, render React in task_text seems not possible. The answer says the React component only supported in the grid and in the task layer.

#4

Hello,
Actually, it is possible to show React elements inside the task bars, but there is no event handler that fires when a task is actually repainted. So, while you drag a task, Gantt repaints the task each time it is moved. As a result, you would need to add React elements to the task bar again, and there is no clear way to detach it. Also, the elements will flicker.

Here is the React demo:
https://files.dhtmlx.com/30d/de71a2da38adba3d07a04a8821f73482/reactive-gantt+react-components-inside-task-bars.zip

If you use the additional task layer, you can put the elements to the same position as the task bar, and you can mount and unmount React elements with the onrender method:
https://docs.dhtmlx.com/gantt/api__gantt_addtasklayer.html#:~:text=Element%20render%20callback

And you can show React elements inside the additional layer instead of showing the task bars.

Here are the demos in the snippet tool:
https://snippet.dhtmlx.com/k00co9gk

And here is the React demo:
https://files.dhtmlx.com/30d/d0d4f6dda1572d1be89612b6eebabe7c/reactive-gantt+addTaskLayer-instead-of-task-bars.zip