title: React - How to add a component to a string
body: <p>I currently have a local React website (first project, so learning as I go) which has a select field that is pulling the options in from a database. That bit is fine. When I create a click function &quot;onChange&quot; to then get data from the database, this works fine.</p>
  <p>My issue is that I want to be able to grab the data from the JSON data and append the data into a component. I currently have the following component set up, which works when I add this onto the page manually:</p>
  <pre><code>&lt;QuotePhaseTitle title=&quot;Test Title&quot; style=&quot;primary&quot; /&gt;
  </code></pre>
  <p>So what I basically want to do is within the &quot;onChange&quot; function, get the data (which I can do easily enough) and then pass that to the &quot;title&quot; and &quot;style&quot; props. Once that has been passed, I then need to be able to return that data and input into the page somewhere.</p>
  <p>Below is an example of the function so far (I am using WPAPI):</p>
  <pre><code>const quoteTypeChange = async (e) =&gt; {
      e.preventDefault();
      const optionValue = e.target.value;
      try {
          await wp.quoteType().id(optionValue).then((data) =&gt; {
              const quoteTypeDetails = data;
              // Ideall want to pass in the &lt;QuotePhaseTitle title=&quot;Test Title&quot; style=&quot;primary&quot; /&gt; component, add in the data and then display that on the page //
          }).catch((error) =&gt; {
              // Error //
          });
      } catch (error) {
          // Error //
      }
  }
  </code></pre>
  <p>How would I go about doing this? Sorry if this is a basic question.</p>