title: React JS Modal opening from Navbar
body: <p>so basically I want to open Modal using button in my Navbar. When you're on main page you can see navbar in the top section then bellow is HeroSection....</p>
  <p>This is my code:</p>
  <p>Navbar.js:</p>
  <pre><code>import React, { useState } from 'react';
  import { Button } from './Button';
  import { Link } from 'react-router-dom';
  import './Navbar.css';
  import * as openModal from &quot;./HeroSection&quot;;
  
  
  function Navbar() {
    const [click, setClick] = useState(false);
  
  
    const handleClick = () =&gt; setClick(!click);
    const closeMobileMenu = () =&gt; setClick(false);
  
  
    
  
    return (
      &lt;&gt;
        &lt;nav className='navbar'&gt;
          &lt;div className='navbar-container'&gt;
            &lt;Link to='/' className='navbar-logo' onClick={closeMobileMenu}&gt;
              TRVL
              &lt;i class='fab fa-typo3' /&gt;
            &lt;/Link&gt;
            &lt;div className='menu-icon' onClick={handleClick}&gt;
              &lt;i className={click ? 'fas fa-times' : 'fas fa-bars'} /&gt;
            &lt;/div&gt;
            &lt;ul className={click ? 'nav-menu active' : 'nav-menu'}&gt;
              &lt;li className='nav-item'&gt;
                &lt;Link to='/' className='nav-links' onClick={closeMobileMenu}&gt;
                  Home
                &lt;/Link&gt;
              &lt;/li&gt;
              &lt;li className='nav-item'&gt;
                &lt;Link
                  to='/services'
                  className='nav-links'
                  onClick={closeMobileMenu}
                &gt;
                  Services
                &lt;/Link&gt;
              &lt;/li&gt;
              &lt;li className='nav-item'&gt;
                &lt;Link
                  to='/products'
                  className='nav-links'
                  onClick={closeMobileMenu}
                &gt;
                  Products
                &lt;/Link&gt;
              &lt;/li&gt;
  
              &lt;li className='nav-item'&gt;
              &lt;Link
                  to='/products'
                  className='nav-links'
                  onClick={closeMobileMenu}
                &gt;
                  Products
                &lt;/Link&gt;
              &lt;/li&gt;
  
  
            
            &lt;/ul&gt;
            &lt;Button onClick={openModal} buttonStyle='btn--outline'&gt;SIGN UP&lt;/Button&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
      &lt;/&gt;
    );
  }
  
  export default Navbar;
  </code></pre>
  <p>HeroSection.js:</p>
  <pre><code>import React, {useState} from 'react';
  import '../App.css';
  import { Button } from './Button';
  import './HeroSection.css';
  import styled from 'styled-components';
  import { Modal } from './Modal';
  import { GlobalStyle } from './globalStyles';
  
  const Container = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  `;
  
  
  
  function HeroSection() {
    const [showModal, setShowModal] = useState(false);
  
    const openModal = () =&gt; {
      setShowModal(prev =&gt; !prev);
    };
  
    return (
      &lt;Container&gt;
      &lt;div className='hero-container'&gt;
        &lt;video src='/videos/video-1.mp4' autoPlay loop muted /&gt;
        &lt;h1&gt;ADVENTURE AWAITS&lt;/h1&gt;
        &lt;p&gt;What are you waiting for?&lt;/p&gt;
        &lt;div className='hero-btns'&gt;
          &lt;Button
            className='btns'
            buttonStyle='btn--outline'
            buttonSize='btn--large'
          &gt;
            GET STARTED
          &lt;/Button&gt;
          &lt;Button
            className='btns'
            buttonStyle='btn--primary'
            buttonSize='btn--large'
            onClick={openModal}
          &gt;
            WATCH TRAILER &lt;i className='far fa-play-circle' /&gt;
          &lt;/Button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;Modal showModal={showModal} setShowModal={setShowModal}/&gt;
          &lt;GlobalStyle /&gt;
      &lt;/Container&gt;
    );
  }
  
  export default HeroSection;
  </code></pre>
  <p>Modal.js:</p>
  <pre><code>import React, { useRef, useEffect, useCallback } from 'react';
  import { useSpring, animated } from 'react-spring';
  import styled from 'styled-components';
  import { MdClose } from 'react-icons/md';
  import '../App.css';
  
  const Background = styled.div`
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
  `;
  
  const ModalWrapper = styled.div`
    width: 800px;
    height: 500px;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
    background: #fff;
    color: #000;
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    z-index: 10;
    border-radius: 10px;
  `;
  
  const ModalContent = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.8;
    color: #141414;
    p {
      margin-bottom: 1rem;
    }
    button {
      padding: 10px 24px;
      background: #141414;
      color: #fff;
      border: none;
    }
  `;
  
  const CloseModalButton = styled(MdClose)`
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    padding: 0;
    z-index: 10;
  `;
  
  export const Modal = ({ showModal, setShowModal }) =&gt; {
    const modalRef = useRef();
  
    const animation = useSpring({
      config: {
        duration: 250
      },
      opacity: showModal ? 1 : 0,
      transform: showModal ? `translateY(0%)` : `translateY(-100%)`
    });
  
    const closeModal = e =&gt; {
      if (modalRef.current === e.target) {
        setShowModal(false);
      }
    };
  
    const keyPress = useCallback(
      e =&gt; {
        if (e.key === 'Escape' &amp;&amp; showModal) {
          setShowModal(false);
          console.log('I pressed');
        }
      },
      [setShowModal, showModal]
    );
  
    useEffect(
      () =&gt; {
        document.addEventListener('keydown', keyPress);
        return () =&gt; document.removeEventListener('keydown', keyPress);
      },
      [keyPress]
    );
  
    return (
      &lt;&gt;
        {showModal ? (
          &lt;Background onClick={closeModal} ref={modalRef}&gt;
            &lt;animated.div style={animation}&gt;
              &lt;ModalWrapper showModal={showModal}&gt;
                &lt;ModalContent&gt;
          &lt;img src={&quot;./logo512.png&quot;} className=&quot;App-logo&quot; alt=&quot;logo&quot; /&gt;
                &lt;/ModalContent&gt;
                &lt;CloseModalButton
                  aria-label='Close modal'
                  onClick={() =&gt; setShowModal(prev =&gt; !prev)}
                /&gt;
              &lt;/ModalWrapper&gt;
            &lt;/animated.div&gt;
          &lt;/Background&gt;
        ) : null}
      &lt;/&gt;
    );
  };
  </code></pre>
  <p>I tried to link the SIGN UP button in Navbar to execute &quot;openModal&quot; function in my HeroSection and hope that it will execute the code and open the Modal on the main page. Can anyone help me solve this? Thanks!</p>