Unable to use URL as a link from Firebase Firestore

user_12147587 0
Viewed 76

Is there a way that a URL can be saved in Firestore so that it can be used as a link to an external website? Or is there another way around this?

Currently, I've got multiple documents in a collection that all have the same format as below;

Field Content Field Type
contactName John Doe string
contactNumber 1234567890 num
contactAddress 1234 Anywhere St string
contactEmail example@example.com string
contactWebsite http://www.example.com string

I'm able to map through all of the documents without a problem. The bit where I'm coming unstuck is passing the website into a Link tag and attaching the link to the contact name. Apologies if that doesn't make sense hopefully, the code below will make it clearer...

import {Link} from 'react-router-dom';

<div className="contact-details">
  <Link to={{pathname:"{props.contact.contactWebsite}"}} target="_blank">
    {props.contact.contactName}
  </Link>
  Contact Number: {props.contact.contactNumber}
  Contact Address: {props.contact.contactAddress}
  Contact Email: {props.contact.contactEmail}
</div>

In its current form, the code works, but when the link is clicked, it opens my 404 page rather than opening a new tab with the chosen website.

google-cloud-firestore firebase reactjs javascript
1 Answers

Absolutely, a URL is just a string at the end of the day. you can encode it using encodeURIcompnent if you want to ensure characters are escaped. Once you pull it from firestore, you can process the URL as needed (https, and so on) and then insert it as an <img> src value, or hand it to the window.location.

user_23011610
Related