title: How to directly insert text anywhere in an input field when a button is clicked in React?
body: <p>Let's say I have an input field:</p>
  
  <pre><code>&lt;input type="text" value={this.state.title} /&gt;
  </code></pre>
  
  <p>Now it has a value of e.g. "Good morning!". What I'd like to do is to be able to insert some pre-defined text into the input field when a particular button is clicked anywhere in the input field. E.g. When I click <code>"[First Name]"</code> / <code>"[LastName]"</code> buttons, the value of the input field can become, e.g. "Good morning [First Name]".</p>
  
  <p>I am able to add at the end of the text currently by getting the focused input, assigning that to state, and then using that to know which key in the state to change:</p>
  
  <pre><code>addCodeText(value) {
      const { currFocusedInput } = this.state;
  
      this.setState({
        [currFocusedInput]: `${
          this.state[currFocusedInput]
        } [${value}]`,
      });
    }
  </code></pre>
  
  <p>However, as I mentioned, this only adds to the end of the text. I'd like to be able to directly insert into the input tag / element instead of changing the state so that I can choose where to insert (anyway, the input element is a controlled input).</p>
  
  <p>What I meant is that I can put the cursor in the input field in front of "Good Morning" and the resulting value when I click the button would be e.g. "[First Name], Good morning!". In my current example, it always appends at the end of whatever is the value of the string.</p>
  
  <p>How do I go about doing this?</p>