How to convert detected url in text to link in React?-CodePudding

I am making a SNS website and trying to convert detected url in text to shown as links.

import React from "react";
import "./PostCard.css";
import { useNavigate } from "react-router-dom";
import datePretty from "../../helperFunctions/datePretty";

function PostCard({ userName, postTime, likeCount, commentCount, postText }) {

  var pastTime = datePretty(postTime)

  return (
    <div className="postingCard">
      <div className="postingHeader">
        <div className="postingProfile">
          <img className="postPP" src="profile.png" alt="Sample profile"></img>
        </div>
        <div className="postingWriter">
          <h3>{userName}</h3>
        </div>
        <div className="dateWritten">
          <h4>Posted {pastTime} ago</h4>
        </div>
        <div className="postSetting">
          <i className="fa-solid fa-ellipsis fa-2xl" id="postSet"></i>
        </div>
      </div>
      <div className="postingBody">
        <div className="postingSection">
          <div className="postWords">
            <h4>{postText}</h4>
          </div>
        </div>
        <div className="iconSection">
          <div className="likeSection">
            <i className="fa-regular fa-thumbs-up fa-2xl" id="like"></i>
            <div className="likeCount" id="likeNum">
              {likeCount}
            </div>
          </div>
          <div className="commentSection">
            <i className="fa-regular fa-comment-dots fa-2xl"></i>
            <h5 className="commentCount">{commentCount}</h5>
          </div>
        </div>
      </div>
    </div>
  );
}

export default PostCard;

This is my code that I currently working on. The postText is the element that I tried to convert to shown as link.

For example, when I uploaded like "hello, https://www.youtube.com", then https://www.youtube.com should be able to click and redirect to YouTube.

Can you please tell me how to figure this out?

CodePudding user response：

Assuming that the logic to detect a url in the original string is already built and that what you are passing down in postText is a string containing a url, you can wrap an anchor tag around your h4 and simply set the href property to {PostText}

<a href={postText}>
  <h4>{postText}</h4>
</a>

If you intend to have it open in a new tab make sure to set target to _blank and rel to noreferrer

<a href={postText} target="_blank" rel="noreferrer">
  <h4>{postText}</h4>
</a>

CodePudding user response：

The react way of doing this would be to create a react component and pass the text as props, and handle the logic inside that component.

Here is my take on this, you should change the link detection to your needs.

   export default function PostText(props) {
  
   const [isLink,setIsLink] = useState(props.text.includes("http"))
   const [textArr,setTextArr] = useState([])

   useEffect(()=> {
     const txt = props.text
     if (txt.includes("http")) {
       setIsLink(true)
        const firstIndex = txt.indexOf("http"); //find link start 
        const linkEnd = txt.indexOf(" ",firstIndex) //find the end of link
        const firstTextSection = txt.slice(0,firstIndex)
        const linkSection = txt.slice(firstIndex,linkEnd)
        const secondSection = txt.slice(linkEnd)
        setTextArr([firstTextSection,linkSection,secondSection])
     } else {
       setIsLink(false)
     }
   },[])
  return isLink ? (
    <div >
      <p>{textArr[0]}</p>
      <a href={textArr[1]} target="_blank" rel="noreferrer">Link</a>
      <p>{textArr[2]}</p>
    </div>
  ) : (
  <div>
    <p>{props.text}</p>
  </div>)
}