button not going to correct links - reactjs

Question

I am using react and doing my portfolio
when people click on the button to view my github repo or project it goes to the wrong place
const Project = () => {
return (
<div className='work-container'>
<h1 className='project-heading'>Projects</h1>
<div className='project-container'>
{ProjectData.map((val, ind) => {
return (
<ProjectCard
key={ind}
imagesource={val.imagesource}
title={val.title}
text={val.text}
view={val.view}
github={val.github}
/>
)
})}
</div>
</div>
)
}
this is what my data file contains
const ProjectData = [
{
imagesource: project1,
title: 'Diamond Devs Tech Blog',
text: 'A community of developers who can write blogs about code or ask questions Built out of a need for developers have a nice simple platform rather than the complex ones out there in the marketplace, this was for an assignment foor my Bootcamp was challenging as had to do the front and backend from scratch using tech that I am still getting used too.',
view: 'https://diamond-developers-tech-blog.herokuapp.com/',
github: 'https://github.com/breakfireaus/diamond-developers-tech-blog',
},
]
export default ProjectData
I tried the above and instead of going to view project or github it goes to for example
https://matthew-younger-portfolio.herokuapp.com/portfolio/https://diamond-developers-tech-blog.herokuapp.com/
instead of just
https://diamond-developers-tech-blog.herokuapp.com/

Answer 1

I have reviewed code from you github repo. What you are doing is using React router NavLink to move to an external website which you cannot do as you can use it move within your application Documentation
.
You can convert them to a tag in your Project Card and they will work fine. You can use target="_blank" if you want to open the link in new tab.
import "./ProjectCardStyle.css";
import React from "react";
import { Link } from "react-router-dom";
const ProjectCard = (props) => {
return (
<div className="project-card">
<img src={props.imagesource} alt="Project Imagery" />
<h2 className="project-title">{props.title}</h2>
<div className="project-details">
<p>{props.text}</p>
<div className="project-buttons">
<a target={"_blank"} href={props.view} className="btn">
VIEW
</a>
<a target={"_blank"} href={props.github} className="btn">
Github
</a>
</div>
</div>
</div>
);
};
export default ProjectCard;