title: How to add link to a string in react
body: <p>I am trying to add Link in a string of a component but I'm having issues that it displayed as a Object Object.</p>
  <p>I add productPage link as object or as a component to my Tooltip component.</p>
  <p>How can I achieve it in this situation?</p>
  <p>Here is my code base:</p>
  <p>Tooltip.js:</p>
  <pre><code>const useStylesBootstrap = makeStyles({
    arrow: {
      color: &quot;#e06a56&quot;
    },
    tooltip: {
      backgroundColor: &quot;#e06a56&quot;,
      fontSize: 11,
      width: '180px'
    }
  });
  
  function BootstrapTooltip(props) {
    const classes = useStylesBootstrap();
  
    return &lt;Tooltip arrow classes={classes} {...props} /&gt;;
  }
  
  export default function CustomizedTooltips(props) {
    return (
      &lt;BootstrapTooltip title={props.content}&gt;{props.button}&lt;/BootstrapTooltip&gt;
    );
  }
  </code></pre>
  <p>App.js:</p>
  <pre><code>const renderHideOptionalClauseTrigger = () =&gt; {
  
    const productPage = () =&gt; {
      return (
        &lt;Link to=&quot;/product&quot;&gt;
          Product page
        &lt;/Link&gt;
      )
    }
  
    return (
      &lt;div&gt;
        &lt;text&gt;My Optional Loan Clause&lt;/text&gt;
        &lt;Tooltip
          button={
            &lt;span&gt;
              &lt;i className=&quot;fas fa-exclamation-circle&quot;&gt;&lt;/i&gt;
            &lt;/span&gt;
          }
          content={
            `Will be added verbatim as last clause to the loan agreement. See ${productPage} for other clauses.`
          }
        /&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>Updated! If I put my link like this</p>
  <pre><code>const productPage = &lt;Link className=&quot;orange-link&quot; to=&quot;/product&quot;&gt;Product page&lt;/Link&gt;
  </code></pre>
  <p>it will be come Object Object..</p>
  <p><a href="https://i.stack.imgur.com/7nXMb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7nXMb.png" alt="enter image description here" /></a></p>