In React how open the dropdown when click a button from different function component

Question

I wanted to do like when clicking on this join button, want to show the user registration form dropdown from the navbar component. I don't know how to do this s, can anyone help, please?

const [isMenuOpen, setIsMenuOpen] = React.useState(false);


<ColorNavbar isMenuOpen={isMenuOpen} />



<Button
        id="loyaltyButton"
        className="text-center btn btn-lg btn-round mt-3 text-capitalize"
        onClick={() => {
          setIsMenuOpen(true);
        }}
      >
        Join Now
      </Button>

ColorNavbar.js

<UncontrolledDropdown nav inNavbar>
            <DropdownToggle className="mr-2 iconN" tag={Link}>
              <img
                className="megan-text pb-1"
                src={require("assets/img/Page/Navbar/user3.png")}
                alt="shoppingbag"
                width="15"
                height="20"
              />
              <img
                className="megan-text img-hover"
                src={require("assets/img/Page/Navbar/user1.png")}
                alt="shoppingbag"
                width="15"
                height="20"
              />
            </DropdownToggle>
            <DropdownMenu
              className="dropdown w-25 "
              right
              id="nav-float-right"
              isOpen={isMenuOpen}
            >
              <UserComponent />
            </DropdownMenu>
          </UncontrolledDropdown>

Answer 1

It's so simple, you can do something like this:

NOTE: You can implement this logic on the dropdown that you have.

First component:

    export default function First (){
       const [show, setShow] = useState(true);
       const handleShow = () => setShow(!show);

      return (
      <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <hr />
      <Second show={show} />
      <button type="button" onClick={handleShow}>
        Toggle the Component
      </button>
    </div>
  );
    }

Inside Second Component

export default function SecondComponent ({show,handleHide}){
     return (
       <div hidden={show}>
          <div>Hey! I'm here....</div>
       </div>
      );
    }