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

user_9314075 0
Viewed 345

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?

reactjs web javascript
2 Answers

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>
user_188166020

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>)
}
user_174731970
Related