new line in textarea while looping with props

Given this snippet, how can I insert a new line at the specified position?

<div>
    <textarea>:  </textarea>
----------------------------------------------------------^
</div>

<br> and \n are printed as text inside textarea

Right now, I'm cheating like this

<div>
    <textarea>: 
</textarea>
</div>

This also works, but I get two new lines per loop and big indentation per line

<div>
    <textarea>
        
            : 
        
    </textarea>
</div>

I would like to maintain code readability like the first or last example