ReactJs Pass State from Navbar to child components

Greetings and thank you for stopping by to check this. I'm having some issues and I don't reall know how to fix this.

I have a react js app acctually running with nextjs. So the thing is, I have a navbar, as a compoents and a sign up page as a component.

What I want is simple, when I click on the sign up button on the navbar, the signUp modal should pop up, and when I click on the close (x) icon on the modal, the modal should close.

So far, I've made it possible with useState to show the signUp modal when the signUp button is clicked.

Since the signUp modal is a component that I'm importing to the navabr, I'm finding it difficult to useState to close it when opened.

This is my code.

import SignUpModal from '../SignIn/Register';
function Navbar(
  // Show Reigster Modal when the button is clicked
  const [register, setRegister] = useState(false);

  return () {
   <>
     {register ? <SignUpModal /> : ''}
     <nav>
     <div>
      <Link>Home</Link>
      <Link>About</Link>
      <Link>Login</Link>
      <button
        type="button"
        onClick={() => setRegister(!register)} > Sign Up
      </button>
    </div>
   </nav>
 </>
 )
}

Now, when I click on the signUp button, the modal that I imported, is shown. But on the modal components, I can't close the modal because I can't pass the state from the navbar to the SignUp compoents and close it when I click on the close(x) icon.

On the SignUp component, I know I can do <button type="button" onClick={() => setNavbar(!navbar)}>Close</button>

But how do I pass it? Please someone should help me, thanks!

`

For closing the modal from within the modal component, you just need to pass in a function as a prop to the component, which you can call within the onClick() function of the close button.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import SignUpModal from '../SignIn/Register';
function Navbar(
  // Show Reigster Modal when the button is clicked
  const [register, setRegister] = useState(false);

  return () {
    <>
     {register && <SignUpModal onClose={() => setRegister(false)} />}
     <nav>
       <div>
        <Link>Home</Link>
        <Link>About</Link>
        <Link>Login</Link>
        <button
          type="button"
          onClick={() => setRegister(true)} > Sign Up
        </button>
      </div>
     </nav>
    </>
  }
 )
}

<!-- end snippet -->