Sidebar functionality without duplicated code

I'm refactoring my website right now, and I'm new to Next.js. All the tutorials I've found online have been super helpful, but something I still don't get is how to set the class name of a div in A.tsx by clicking on a div in B.tsx.

At first, I tried to do it the way I would have done it in plain HTML/CSS/JS (yes I know this is ugly and gross, it was late at night and my brain wasn't working)

function expClick() { document.querySelector('#me').className = "contentItem hidden"; document.querySelector('#exp').className = "contentItem"; document.querySelector('#cert').className = "contentItem hidden"; document.querySelector('#pm').className = "contentItem hidden"; document.querySelector('#tech').className = "contentItem hidden"; document.querySelector('#expNav').className = ""; document.querySelector('#menuMe').className = "w-[6rem] menuItem hover:drop-shadow-[0px_0px_10px_rgba(200,200,200,0.75)] rounded-full border-2 mt-8"; document.querySelector('#menuExp').className = "menuItem font-medium text-[3.25rem]"; document.querySelector('#menuCert').className = "menuItem font-bold"; document.querySelector('#menuPM').className = "menuItem font-bold"; document.querySelector('#menuTech').className = "menuItem font-bold"; }

Of course, this threw error after error so I changed it to using variables in the 'className' fields instead like this:

//js menuMe = "menuItem hover:drop-shadow-[0px_0px_10px_rgba(200,200,200,0.75)] rounded-full border-2 mt-8"; menuExp = "menuItem font-bold"; menuCert = "menuItem font-bold"; menuPM = "menuItem font-bold"; menuTech = "menuItem font-bold"; //html <div onClick={expClick} id="menuExp" className={`${menuExp}`}></div>

While that works a lot better than the stuff I was doing with the document.querrySelector garbage, what I still can't figure out is how to pass a variable from A.tsx to B.tsx when they're set up like this:

A.tsx has the menu code I listed above. B.tsx:

<A /> <div className="hidden">content here</div>

What I would like to do is change the className in B.tsx from 'hidden' to ' ' by clicking an element that's defined and set up in A.tsx, but I just can't figure out how to do that. Thank you for any help!