How to "re-render" React components?

[zilahir]

Hi!

I am trying to figure this out for a while, without a success.

I have a react component in a templ (page) component:

...
@components.ChartData(metrics)
...
<div class="md:mt-10 p-5 h-[40vh]" id="chart-root">
     <script type="text/javascript">
          bundle.renderChart(document.currentScript.closest('div'))
      </script>
</div>

Then i have another templ component:

templ Table(props TableProps) {
	@ChartData(props.Data)
...

But the script tag is not getting updated with the new data:

templ ChartData(data []models.WaterMetrics) {
	@dataHandler.Once() {
		@templ.JSONScript("data-water-metrics", data)
	}

What am I missing, and how could I achieve

• to update the data being passed from server-side go to script tag
• that my React component re-renders when that happens

Any help would be appreciated!