TextArea does not react to change after manual editing

Question

This little example illustrates it. You click the button, the page changes both the textarea and the input, but if you manually change something in the textarea, it stops updating its content when you click again. How do you solve it, so that it always changes from code?

@page "/TextAreaTest"
<h3>TextArea Test</h3>
<textarea>@textContent</textarea>
<br />
<input type="text" value="@textContent" />
<br /><br />
<input type="button" value="Change It" @onclick="ChangeIt" />

@code {
    string textContent = "now...";

    void ChangeIt() =>
        textContent = $"{DateTime.Now:HH:mm:ss.fff}";
}

Answer 1

Use value or @bind

<textarea value="@textContent"></textarea>
// or
<textarea @bind="textContent"></textarea>