I'm struggling to include a link in my project card component - I've tried using both the Link tag and anchor tag, but so far, I haven't been successful in

I am having trouble getting the link tag to work properly in my UI. I have tried using both the link and anchor tags, but neither seems to be functioning as expected. Can someone please advise on how to fix this issue?

I was expecting the link tag to properly redirect me to the specified page, but it doesn't seem to be working. I even attempted to use the anchor tag instead, but had no luck there either. What steps can I take to resolve this problem?

<Link href="https://github.com/Shivendra-11/swiggy" target="_blank">

        <ProjectCard 
          src="/Swiggy.png"
          title="Swiggy Clone"
          description="Made a clone of the swiggy website using react and tailwind css. used redux tools Hooks and context api for state management and Deep dive into JSX and other core  ."
        />
        </Link>
typescriptnext.jsframer-motion

Answer №1

Insert the following code snippet above ProjectCard.tsx:

<div className="h-full w-full flex flex-col md:flex-row gap-10 px-10 z-30">

Instead of including the link tag in this section, pass the Project link as a prop in the ProjectCard component for better coding practices.

Once you make this change, everything should start functioning correctly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

gulp-tsc cannot locate the src directory

I am currently working on developing a .NET Core application using Angular2, but I keep encountering the following error: /wwwroot/NodeLib/gulp-tsc/src/compiler.ts' not found. I'm having trouble pinpointing what I might be missing. tsconfig.js ...

angulartypescriptgulp

What is the method by which the Material-UI Button component determines the properties for the component that is passed to the `component` prop

Could someone please clarify how Material-UI enhances the properties of its Button component by incorporating the properties of a specific component if passed in the component attribute? interface MyLinkProps extends ButtonBaseProps { someRandomProp: str ...

reactjstypescriptmaterial-uinext.js

In a production environment with NextJS 13 and MongoDB, the data does not update in real-time, while it functions properly in the development environment

I am facing a challenge that is proving to be quite difficult to troubleshoot. My goal is to develop a CRUD application using NextJS, mongoose, and MongoDB. While everything functions perfectly, I am encountering an issue where the data does not automatic ...

mongodbmongoosenext.jsvercel

Overriding the 'first' attribute in PrimeNG's lazy table when implementing filtering

I encountered an issue while attempting to set up a primeNG table using query parameters. For example, when accessing , the data displayed should pertain to "Joe" and start at the 20th entry. To handle the large volume of data my backend can provide, lazy ...

angulartypescriptprimeng

Having difficulty understanding Symbol.iterator and the return value type in a for-of loop while using TypeScript

Currently, I am delving into type script and embarking on a journey to learn how to craft generic containers for educational purposes. I have developed a LinkedList class with the intention of incorporating the ability to iterate over it, like so: for (co ...

typescripttypescript-generics

"Step-by-step guide on adding a loading screen to your Next.js application

I am currently diving into Next.js and utilizing nextjs v9.3, next-redux-wrapper v5, @material-ui/core v4.2, and a custom express server. One of my current challenges is implementing a loading screen during route changes in my Next.js app. I have successf ...

reactjsmaterial-uinext.jsframer-motion

Navigating an Array in Typescript

Angular is linked to node.js, which interacts with mongodb to fetch data successfully. However, I am now faced with the challenge of mapping variables in my typescript component to the backend node.js. When viewing the data structure in the browser consol ...

javascriptnode.jsangulartypescript

What factors should I consider when determining whether to include @types/* in the `dependencies` or `devDependencies` section?

Currently using TypeScript 2 in my project, I am looking to incorporate a JavaScript library along with its typings. While I know I can easily install the types using npm install @types/some-library, I am uncertain whether to use --save or --save-dev. The ...

typescriptnpmtypescript-typingspackage.json

Difficulty encountered while managing dropdown functionality in Protractor using TypeScript

I'm encountering some difficulties when it comes to selecting a dropdown in Protractor. Here's the structure of my DOM: https://i.stack.imgur.com/qK8sT.png This is the XPath I'm using to select the dropdown with the value "Yes": //label[ ...

javascripttypescriptxpathprotractorui-automation

Tips for setting up chrome-app typings in Typescript 2

I am looking to eliminate the typings in our Typescript project. After successfully removing most typings dependencies with Typescript 2, I'm left with just one for chrome-app: https://github.com/uProxy/uproxy/compare/master...fortuna:master When usi ...

typescriptgoogle-chrome-extensionnpmgoogle-chrome-apptypescript-typings

Incorporating a complex React (Typescript) component into an HTML page: A Step-by

I used to have an old website that was originally built with Vanilia Javascript. Now, I am in the process of converting it to React and encountering some issues. I am trying to render a compound React(Typescript) component on an HTML page, but unfortunatel ...

javascripthtmlreactjstypescript

Tips for Achieving Observable Synchronization

I've encountered a coding challenge that has led me to this code snippet: ngOnInit(): void { this.categories = this.categoryService.getCategories(); var example = this.categories.flatMap((categor) => categor.map((categories) = ...

javascriptangulartypescriptobservable

'value' is connected to every single hook

Every time I try to save my work using any hook, the 'value' field changes automatically. This has been causing me a great deal of stress. I would be extremely grateful if someone could assist me with this issue. click here for image description ...

reactjstypescriptnext.js

How can I access a Next.js Application from a set Hostname in my Local Environment?

If I have a Next.js Application that is functioning correctly. It can be accessed through either http://localhost:4000 or http://somehostname.local:4000 To achieve this, I have added the line: 127.0.0.1 somehostname.local to my hosts file. However, ...

reactjsnext.jsdnslocalhosthosts

Struggling with converting blob file to an image within a NextJS application using data from a MySQL database

Currently, I am in the process of working on a project where I need to retrieve an image stored as a blob file in my database. However, for some reason, the image is not displaying properly. Here is the code snippet from the first file, products.jsx: impo ...

mysqlimagenext.js

The custom class-validator decorator in NestJS fails to retrieve the value from the parameter

In my Nestjs project, I have created a Custom ValidatorConstraint using class-validator. The purpose is to create my own decorator and apply it later on DTO classes for validations. Let's consider this route: foo/:client After a request is made, I w ...

node.jstypescriptnestjsdecoratorclass-validator

Error when importing 'useState' from 'react' in Next.js with Framer Motion: "Attempted import error: 'useState' is not exported from 'react' (imported as 'useState')"

In the midst of my next.js project, I decided to incorporate framer-motion. As a newbie to this technology, I encountered an obstacle during the installation and utilization of framer-motion. My goal was to create a motion.div component and implement it in ...

reactjsnode.jsnext.jsnode-modulesframer-motion

Following an update, the functioning of Visual Studio Tools for Apache Cordova ceases to operate accurately

Currently working on an ionic application using Visual Studio Tools for Apache Cordova, everything was going smoothly until I decided to update the Tools for Apache Cordova and TypeScript Tools for Visual Studio. Following the update, the Ripple emulator s ...

typescriptionic-frameworkvisual-studio-cordovaripple

Utilizing NPM Workspace Project in conjunction with Vite to eliminate the necessity of the dist folder during the Vite build process

I am currently working on a project that involves a module using full path exports instead of index files. This project is divided into 2 NPM workspaces: one called core and the other called examples. The challenge I am facing is avoiding long import pat ...

typescriptnpmimportvite

Switching to a night mode in Material UI theme within a React Context

I'm having trouble implementing a dark mode toggle feature for my web app. I am utilizing NextJS with Material UI. I attempted to create a React context that includes a useState and have a switch component modify the context. theme.tsx This is wher ...

reactjsnext.jsreact-hooksmaterial-ui