Insert text at cursor position in React

Question

I have a textarea that I would like to insert text into at the cursor position when a user clicks a button. Does anyone know how to go about that?

Answer 1

Qwertie is of course right. Anyway, if you want to insert a given string into a textarea at the cursor position you could use a function like this:

 insertMyText = e => {
      let textToInsert = " this is the inserted text "
      let cursorPosition = e.target.selectionStart
      let textBeforeCursorPosition = e.target.value.substring(0, cursorPosition)
      let textAfterCursorPosition = e.target.value.substring(cursorPosition, e.target.value.length)
      e.target.value = textBeforeCursorPosition + textToInsert + textAfterCursorPosition
    }

and:

<textarea onClick={this.insertMyText}>bla bla bla bla</textarea>