How to send unique props to similar Parents?

Question

I currently made a custom component that acts similar to a carousel called Scrollbar. When I select a specific item it dynamically loads the information and displays a content div that has information on the item such as id, name, thumbnail-Image, etc..

The problem I am trying to solve is that I want to display multiple Scrollbars and only have one content div active at a time. The issue is that each Scrollbar has their own content div. I need a way to communicate which one is active.

I'm thinking possibly I need another component lets call it Home that displays multiple Scrollbars and onClick, it sets the current one Active and the rest inActive. All the Scrollbars should still be displaying however, one dynamic content div will appear below the active Scrollbar.

This sounds like I need to send one Scrollbar's prop isActive = true and the others isActive = false. I am unsure how to achieve this.

Here are short versions of my components:

Scrollbar.js

const Scrollbar = ({category, isActive }) => {


return (  
     <div className="scrollbar">
                <h2>{category}</h2>
                <div className="item-wrapper" style={{maxWidth: `${scrollbarWidth}px`}}>
                   .
                   .
                   .
                   .
                    //Handles Navigating the Scrollbar Left and Right
                    <SlideButton  type="prev" onClick={handlePrev}/>
                    <SlideButton  type="next" onClick={handleNext}/>
                </div>
                //Dynamic Content gets shown here when user clicks on an item & Scrollbar (tbd)
                {isActive && currentCard && <Content activeCard={currentCard} clickFunc={handleCardChange}  /> }
                
     </div>
    );
}
 
export default Scrollbar;

Home.js

const Home = () => {

       
        return ( 
            
            <div className="home">
                <Scrollbar key="0" category="Scroll 1" activeBar={null} />,
                <Scrollbar key="1" category="Scroll 2" activeBar={null} />
            </div>
        );
    
}
 
export default Home;

Answer 1

The Home component should hold the id of who is the activeBar with useState. It should pass setActiveBar to each Scrollbar.

const Home = () => {
  const [activeBar, setActiveBar] = useState(0)
       
  return ( 
    <div className="home">
        <Scrollbar 
          key="0"
          id="0"
          category="Scroll 1" 
          activeBar={activeBar} 
          setActiveBar={setActiveBar}
          />,
        <Scrollbar 
          key="1"
          id="1"
          category="Scroll 2" 
          activeBar={activeBar} 
          setActiveBar={setActiveBar}
          />
    </div>
  );   
}

The Scrollbar component should check if it's id is identical to activeBar, and set isActive accordingly. It should also set itself to be the activeBar when clicked.

const Scrollbar = ({category, id, activeBar, onClick }) => {
  const isActive = activeBar === id;

  return (  
    <div 
      onClick={() => setActiveBar(id)}
      className="scrollbar"
      >