title: Making text urls clickable in a div
body: <p>I'm trying to make url's clickable in my react application. My current approach is as follows.</p>
  
  <pre><code>render() {
  
    function urlify(text) {
      var urlRegex = /(https?:\/\/[^\s]+)/g;
      return text.replace(urlRegex, function(url) {
        return '&lt;a href="' + url + '"&gt;' + '&lt;/a&gt;';
      })
    }
  
    const headingAvailable = (
      &lt;span className="home_post_text"&gt;{urlify(postData.heading)}&lt;/span&gt;
    );
  
    return (
      &lt;div className="home_post_sections sec2 unchange_div"&gt;{headingAvailable}&lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>But i cannot get this to work correctly. </p>
  
  <p><strong>For example :</strong></p>
  
  <p>if my text is something like this </p>
  
  <p><code>this is a good song https://www.youtube.com/watch?v=i9wBXC3aZ_I&amp;index=8&amp;list=RDxuAH21DkJow</code> </p>
  
  <p>My text is converted to something like this</p>
  
  <p><code>this is a good song &lt;a href="https://www.youtube.com/watch?v=i9wBXC3aZ_I&amp;index=8&amp;list=RDxuAH21DkJow"&gt;&lt;/a&gt;</code></p>
  
  <p><strong>How can i fix this ?</strong></p>