Guide to activating the isActive status on a live link within a map iteration utilizing the NEXTUI navigation bar

Check out the new NEXTUI navbar I'm using:

I am having trouble setting the isActive property on the active link in my NavBar component in Next.js. I couldn't find much help on Google, so I'm hoping someone here has experience with this or knows how to do it.

Here is a snippet of the code:

<Navbar.Content
  enableCursorHighlight
  activeColor="primary"
  hideIn="xs"
  variant="highlight-rounded"
>

  {navigation.map((item, index) => (
    <Navbar.Link key={index} href={item.link}>
      {item.title}
    </Navbar.Link>
  ))}

</Navbar.Content>

UPDATE: When I try adding isActive within the map loop, it affects all links. What I want is to set isActive for the clicked (active) link only. If I don't use a loop for my nav links (which are dynamic), I can set IsActive for one link but then that single link remains active even if I click on other links.

javascriptreactjsnext.js

Answer №1

In order to ensure you are on the correct route, a specific condition must be used within your map.

One approach is to utilize the next/router and compare it with the link property of the item.

 const { asPath } = useRouter();
.
.
.
//inside return body 
....
 {navigation.map((item, index) => {
    if(asPath === item.link)
   return(<Navbar.Link isActive key={index} href={item.link}>
      {item.title}
    </Navbar.Link>);
  });
  else
 return(<Navbar.Lin key={index} href=. {item.link}>
      {item.title}
    </Navbar.Link>);
  })
}

Answer №2

The response is similar to the one above but does not include the if/else statement in the return


{navigation.map((item, index) => (
    <Navbar.Link 
        isActive={asPath === item.link}
        key={index}
        href={item.link}
    >
        {item.title}
    </Navbar.Link>);
  ))}

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

Arranging unrelated divs in alignment

http://codepen.io/anon/pen/Gxbfu <-- Here is the specific portion of the website that needs alignment. My goal is to have Onyx Design perfectly aligned with the right side of the navbar, or to have the navbar extend up to the end of "Onyx Design". The ...

javascripthtmlcss

Utilizing jQuery for resizing images

I'm encountering an issue with my Jquery code as I work on creating a gallery feature. My goal is to have the selected image appear in the center of the screen when clicked, resized to fit the screen size if necessary. However, I've run into perf ...

javascriptjquery

Unable to locate the JavaScript/jQuery key

Struggling with a dictionary in JavaScript being passed to a function in Django. Despite the key existing, I'm getting an error saying 'key message not found'. As a newbie in Javascript and JQuery, I must have made a simple mistake somewhere ...

javascriptjqueryhtmldjango

Implementing JavaScript logic to proceed to the following array within a 3D array once a specific condition is met

I'm currently tackling a challenge that requires me to obtain a specific number using a given 3D array. This array consists of 2D arrays, each containing the same number repeated x times. The parent array is sorted from largest to smallest. Here&apos ...

javascriptarrays

Leveraging various techniques within a single controller in AngularJS

I am seeking assistance and advice on a coding issue I am facing. I am attempting to use two methods in one controller. The first method is to display selected rooms, while the second method is to display selected pax. However, only the first method seems ...

javascriptasp.netangularjsangularjs-scopeasp.net-core-1.0

Toastr - encountering a problem with the settings

After invoking a toastr message using the following command: Command: toastr["success"]("foo") toastr.options = { "closeButton": false, "debug": false, "newestOnTop": false, "progressBar": false, "positionClass": "toast-bottom-right", "prev ...

javascripttoast

MDX is revolutionizing Next app routing with the introduction of 'use client' functionality

After setting up MDX with Next.js 14, I encountered an error when navigating to the mdx page: Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. The file mdx-components.tsx is ...

javascriptnext.jsmdxjs

Achieving a height that fills the available space in Material UI ExpansionPanel

I'm currently exploring the possibilities of the Material UI ExpansionPanel component, particularly looking into the Customized expansion panels example. My goal is to have the open panels occupy 100% of the available space. Despite my efforts using ...

reactjsmaterial-uimui

React TypeScript: The properties of 'X' are not compatible. 'Y' cannot be assigned to 'Z' type

I am currently working on a React-TypeScript application, specifically creating a component for inputting credit card numbers. My goal is to have the FontAwesome icon inside the input update to reflect the brand image as the user enters their credit card n ...

reactjstypescriptfont-awesome

The React Native scrollToIndex function is ineffective on Android devices

I am facing an issue where the scrollToIndex function is working on iOS but not on Android. Any suggestions on how to fix this? this.list.scrollToIndex({animated: true, index: tempIndex, viewOffset:0,viewPosition:0}); Here is my flatlist code: <FlatL ...

androidiosreactjsreact-nativescroll

Refining a JavaScript array of objects based on account category

Currently, I am facing an issue with filtering a JavaScript array that contains objects with boolean properties based on the user's account type. The goal is to filter out the items that do not apply to the specific account type. I have implemented a ...

javascriptnode.jsfilter

How to center a single grid item in Material UI

Is there a way in Material UI to center only one grid item instead of both sides of the grid? When applying alignItems="center" to my grid container, both grid items are centered. However, I would like to center only the grid item on the right side. Here ...

reactjsmaterial-ui

When a form added by jQuery is submitted, the associated JavaScript does not run as expected

After clicking a button on my page, jQuery removes one form and replaces it with another. However, when I try to submit the second form, the associated JavaScript does not execute as expected. Instead of running the JavaScript function, the form submissio ...

javascriptjquery

Testing Vue Component with Cypress revealed that the function getActivePinia was triggered without an active Pinia instance

Below are the code snippets I'm working with: Test.vue <template> <button v-show="store.common == 'hi'" @click="func"> hello world </button> </template> <script setup> import {mainS ...

javascriptvue.jsvue-componentcypresspinia

Pass the value of the search input to child components in Angular 2

Within my Angular 2 application, I am faced with the task of sending the value from an HTML search input to 3 child components only when the user pauses typing for 300ms and has entered a different value than what was previously in the input field. After r ...

javascriptangularrxjsangular2-observables

Underscore performs calculations and outputs a fresh object as a result

Here is an example of a time series: [ { "_id": { "action": "click", "date": "2015-02-02T00:00:00+01:00" }, "total": 5 }, { "_id": { "action": "hit", "date": "2015 ...

javascriptunderscore.jstime-seriesclick-tracking

Using JavaScript to extract data from a JSON-formatted URL

I am currently facing a challenge with parsing JSON data from a specific URL. Despite my efforts, I am unable to retrieve any information related to the "ask" and "bid" values from this JSON feed. The URL in question is . The structure of the JSON data is ...

javascriptjsonapi

Creating a tooltip for a specific cell within an AG grid react component is a useful customization feature

How can I customize the tooltip for a specific row in my AG Grid? I see that there is a tooltipField available in ColDefs, but I want to provide a custom string instead of using a field value. Is there a way to achieve this customization? ...

javascriptreactjstooltipag-grid

The button's status changes to disabled until I click outside the input field in Angular

I am currently facing an issue with a form (heat index calculator) that requires 2 inputs - a dropdown and a button. The button is disabled when there are no inputs or if the inputs are invalid. Everything works correctly, except for the fact that even whe ...

javascriptangulartypescript

Encountering a "window not defined" error while implementing Leaflet in my Nuxt JS application

I'm encountering an issue while trying to generate my nuxt app, specifically on my 'Area' page. It seems like the error is related to the leaflet maps being used on this page. Initially, I attempted to resolve this problem by enclosing my a ...

javascriptvue.jsleafletnuxt.js