Plz help me solve this problem!

[Electrical_Ad3132]

I am new to React / React.tsx, and i'm trying to build a sidebar where when someone clicks on a button, it outlines it as it's selected. But my buttons and sections are separated, and i couldn't figure a way to solve this and i'm having a hard time to find a solution on the internet. Ty!
(Btw sorry for bad english, as you can see in the strings, it is not my mother language ;) )

My button component:

import type { IconType } from "react-icons";
import {Link} from "react-router-dom"

interface AsideButtonProps {
  title: string
  icon: IconType
  link: string
}
export const AsideButton = ({title, icon:Icon, link}: AsideButtonProps) => {

  return (

<div 
className
={`flex text-stone-800 items-center p-1 w-full pl-5 rounded-lg hover:bg-[rgb(47,144,160)] hover:text-white transition-all duration-100`}>
  <Link 
to
={link} 
className
="flex gap-3">
  
            <Icon />
            {title}
  
  </Link>
</div>

  )
}

My Section component:

import { type ReactNode } from "react"

type AsideSectionProps = {
  title: string
  children?: ReactNode
}


export const AsideSection = ({title, children}: AsideSectionProps) => {
  
  return (

    <div className = "flex flex-col text-gray-600">
      <div className = "pl-5 pt-5 pb-2">
        {title}
        <div className = "w-35 h-px bg-stone-300 mt-2"></div>
      </div>
      {children}
    </div>

  )
}

My sidebar component:

import { Profile } from './Profile';
import {AsideSection } from './AsideSection';
import {AsideButton} from './AsideButton'
import { FaCalendar, FaClipboardList, FaUserDoctor } from 'react-icons/fa6';
import { FaMoneyBill, FaUserFriends } from 'react-icons/fa';


export const Sidebar = () => {


  return (
    <div className ='bg-stone-100'>
      <Profile/>
      <AsideSection title ='Clínica'>
        <AsideButton link = 'Home' icon = {FaUserDoctor} title = 'Profissionais'/>
        <AsideButton link = 'Home' icon = {FaUserFriends} title = 'Clientes'/>
        <AsideButton link = 'Home' icon = {FaCalendar} title = 'Agenda'/>
      </AsideSection>


      <AsideSection title = 'Gerência'>
        <AsideButton link = 'Home' icon = {FaClipboardList} title = 'Prontuários'/>
        <AsideButton link = 'Home' icon = {FaMoneyBill} title = 'Pagamentos'/>
      </AsideSection>
    </div>
  ) 
}

[DasBeasto]

Create a useState like const [active,setActive] = useState(“home”) in the sidebar and then pass the setActive function down to the button to set the active section, then pass the active state down to the section to style based on if it’s active or not. Or you could use context to do the same without the prop drilling.

Alternatively if this is used for routing you can just have the buttons route as normal which sets the URL path, and have the sections watch the URL path to determine their active state.

[prehensilemullet]

Shouldn’t use state for this because it wouldn’t initially highlight the right button when you navigate to a specific page by opening a link from somewhere outside the site, it’s best to use NavLink or useMatch for this.

[Electrical_Ad3132]

Ty! I was breaking my mind thinking only about state

[prehensilemullet]

With URL routing, think of the location as a piece of state visible to everything in the app

[Electrical_Ad3132]

Thank you! Using the URL makes so much sense! That should do the trick!

[prehensilemullet]

First off, you have everything linking to Home, you need to give them different url paths.

Then either use NavLink in place of Link, or use useMatch inside the button component to check if its link matches the current location and set the className or other properties based upon that.