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>

MN A · Accepted Answer · 2022-12-21 08:39:17Z

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>
      );
    }

edited Dec 21, 2022 at 8:39

answered Dec 20, 2022 at 10:33

MN A

4910 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lucky Over a year ago

it does't work , i have try in codesandbox and have attracted the link, it will example how my code structure. codesandbox.io/s/gracious-cache-eicrlk?file=/src/…

MN A Over a year ago

Yeah, but I correct it in codesandbox. You can check here.codesandbox.io/s/nifty-yonath-wf1r96?file=/src/Second.js

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related