Using for loop within SVG

How to / Third Party Tooling
1

I’m using SVG to display a background image and overlay that with a Polyline curve. Then I need to overlay text on various points of the curve as you can see from the image.

The position of the 8 text fields are determined by the high and low points on the curve. In my previous dev environment this was easy but so far all I can do is write 8 separate modules.
Surely there must be a way to iterate through a loop 8 times outputting the needed code?

Essentially I’m looking to output 8 blocks like this within the SVG block.

<Text
	fill="white"
	stroke="none"
	fontSize="14"
	fontWeight="bold"
	x={dayPos.t1}
	y="250"
	textAnchor="middle"
>{dayTides.time1}</Text>

curve