skip to Main Content

I have a data.jsx page with multiple data arrays which I then map out on my component jsx file. one of the array entries is a link in an a tag but when I try to visit the link on my localdev it presents me with an error; problem is clearer below

here is part of my code for my data.jsx file:

id: 1, /* RESILIENT FITNESS */
    img: Work1,
    modalImg: WorkModal1,
    title: 'Website Build',
    details: [
      {
        icon: <FiFileText />,
        title: 'Project : ',
        desc: 'Website',
      },
      {
        icon: <FiUser />,
        title: 'Client : ',
        desc: 'Resilient Fitness',
      },
      {
        icon: <FaCode />,
        title: 'Language : ',
        desc: 'HTML, CSS, JavaScript',
      },
      {
        icon: <FiExternalLink />,
        title: 'Preview : ',
        desc: <a href="www.example.com">Click Here</a>,
      },

the last part has a desc with a preview so viewers can visit the website by ‘clicking here’; however Im not sure if the issue is the code itself or its because Im working on my local dev (localhost:5173); this is the error when I actually try to click on ‘Click Here’ in the desc

enter image description here

I’m not sure if this is only happening as Im on a localhost; will the issue resolve itself once I deploy the website?

2

Answers


  1. As you can see you want to redirect on some page but the error shows the link is postfixed to localhost url. and hence it’s giving you error.

    Currently I’ve a solution is to call a function on click and in that function assign the url.

    const somefn=()=>{
    window.location.assign(url_goes_here);
    }
    

    Hope It’ll help. Thanks

    Login or Signup to reply.
  2. Replace www.example.com with http(s)://www.example.com.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search