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?

https://i.sstatic.net/tAD7C.png

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

Property finally is missing in the Response type declaration, making it unassignable to type Promise<any>

After removing the async function, I encountered an error stating that the Promise property finally is missing when changing from an async function to a regular function. Any thoughts on why this would happen? handler.ts export class AccountBalanceHandle ...

javascriptangularreactjstypescriptasync-await

Issues with Observable<boolean> functionality

Can anyone lend a hand? I'm facing a challenge with this function that is crucial for the application. Typescript File get $approved(): Observable<boolean> { return this.$entries.map(entries => { if (entries.length > 0) { ret ...

angulartypescriptfirebaserxjs6

Leverage server variables within the construction process for both development and production environments

I initially believed that using ${process.env.apiservervariable} for my api calls would work. I included this in my env.development file. NEXT_PUBLIC_REACT_APP_API_SERVER="http://localhost:8000" It functions correctly when running npm run dev. ...

next.js

Tips for updating a component's state from another component in a React Native application

I have a map displaying a specific region based on the user's location. I am trying to implement a button in a separate file that will reset the map back to the user's current location while maintaining modularity. Can someone guide me on how to ...

reactjstypescriptreact-nativeinheritancestructure

What is the proper way to write a function that verifies the presence of a key in an object and then retrieves the associated value?

After holding out for a while hoping to stumble upon the solution, I've decided to give it a shot here on SO since I haven't found it yet. import { PDFViewer, MSViewer } from './viewerclasses' //attempting to incorporate a union of key ...

javascripttypescriptfunctionindexingtypes

"Utilizing an exported constant from a TypeScript file in a JavaScript file: A step-by-step guide

I am facing an issue when trying to import a constant from a TypeScript file into a JavaScript file. I keep encountering the error Unexpected token, expected ,. This is how the constant looks in the ts file: export const articleQuery = (slug: string, cate ...

javascripttypescript

What is the process for configuring PhpStorm to sync with TypeScript tsconfig.json in .vue files?

Vue.js (webpack + vueify) with TypeScript is my current setup. The ts configuration appears to be functioning, but only in .ts files. For instance, in tsconfig.json: "compilerOptions": { "strictNullChecks": false, So strictNullChecks works as expect ...

typescriptvue.jsphpstormvuejs2webstorm

What is the best way to destructure a blend of React props and my own custom props in my code?

I have a requirement to develop a custom React component that serves as a wrapper for the Route component in order to create secure routes. The challenge I am facing is how to access the element property, which is typically specified in the <Route> e ...

reactjstypescript

The getServerSessoin function in NextJS13 with the /app directory and next-auth module is responsible for returning the session, whereas the use

Here are some important points to note: The sessions are stored in a database using next-auth. The middleware.ts file does not have access to getServerSession. The getServerSession function returns a session in server components. In client components, the ...

next.jsservermiddlewarenext-auth

How can we track and record NaN values in JavaScript/TypeScript as they occur in real-time?

Is there a reliable method to identify and prevent NaN values during runtime, throughout all areas of the application where they might arise? A) Are there effective linting tools available to alert about possible occurrences of NaN values within specific ...

javascripttypescripterror-handlinglinthealth-monitoring

Refreshing the page causes TypeScript Redux to lose its state

custom/reducer/shoppingReducer.ts import { createSlice, PayloadAction } from "@reduxjs/toolkit"; import { ShoppingReducerInitialState } from "../../types/reducer-types"; import { ProductItem, ShippingDetails } from "../../types/typ ...

reactjstypescriptreduxredux-toolkitredux-persist

Finding out if an array is empty or not in Reactjs: A Quick Guide

I am currently working with Reactjs and Nextjs. I am using axios to fetch data, and I need a way to determine if the array (students.data) is empty before running a map or loop. How can I achieve this? Here is the code snippet I am working with: const [stu ...

javascriptreactjsnext.js

Angular 6 - Ensuring all child components are instances of the same component

My issue has been simplified: <div *ngIf="layout1" class="layout1"> <div class="sidebar-layout1"> some items </div> <child-component [something]="sth"></child-component> </div> <div *ngIf="!layout1" class= ...

angulartypescriptcomponentsangular-clidirective

Is it correct to implement an interface with a constructor in TypeScript using this method?

I am completely new to TypeScript (and JavaScript for the most part). I recently came across the article discussing the differences between the static and instance sides of classes in the TypeScript handbook. It suggested separating the constructor into an ...

typescript

React version 18.2.0 and Next.js version 13 faced an issue with hydration failure due to the initial user interface not matching. This problem

Upon opening the page, I encounter an error when focusing on the input element right away. However, if I wait a few seconds before focusing on the input element, the error does not occur. Unfortunately, I have been unable to resolve this issue. Interesting ...

javascriptreactjsnext.js

An error occurred as the Serverless Function timed out while attempting to load a dynamic route in Next.js version 13

I have a basic Next.js application with the following route structure: /contentA/ - Static - Initial load: 103 kB /contentA/[paramA]/groups - SSG - Initial load: 120 kB /contentB/[paramA]/[paramB]/[paramC] - SSR (client component) - Initial load: 103 kB ...

javascriptreactjstypescriptnext.jsreact-server-components

Generate several invoices with just a single click using TypeScript

I'm interested in efficiently printing multiple custom HTML invoices with just one click, similar to this example: Although I attempted to achieve this functionality using the following method, it appears to be incorrect as it prompts the print dialo ...

javascripthtmlcssangulartypescript

Error: The selector "html" is not considered pure as it does not contain any local class or id. Pure selectors must include at least one local class or id

When working on my Next.js project, I included the following code in _app.js: import '../src/styles/style.module.scss'; import '../src/styles/main.module.scss'; This is the content of main.module.scss: // ./src/styles/main.module.scss ...

javascriptcssnext.js

The Vue event was triggered, however there was no response

My current project consists of a Typescript + Vue application with one parent object and one component, which is the pager: //pager.ts @Component({ name: "pager", template: require("text!./pager.html") }) export default class Pager extends Vue { ...

typescriptvue.jsvuejs2vue-component

Unit test: Using subjects instead of observables to mock a service and test the change of values over time results in TypeScript throwing error TS2339

I have a unique scenario where I have implemented a service that accesses ngrx selectors and a component that utilizes this service by injecting it and adjusting properties based on the values retrieved. For unit testing purposes, I am creating mock versi ...

angulartypescriptunit-testingobservablebehaviorsubject