Изменить состояние пропущенной опоры

Question

Я сталкиваюсь с проблемой, когда у меня есть компонент Header и внутри Header. Я передаю реквизиты в Navbar, но прямо сейчас мне нужно изменить состояние prop из Header внутри Navbar. Внутри Navbar мне нужно каким-то образом получить доступ к menuState и иметь возможность изменять состояние, которое мне нужно передать в стилизованные компоненты.

HEADER:

        <HeaderWrapper>
            <HeaderLogo>
                <Link to={"/"}>
                    <img src={''} height="45" alt=""/>
                </Link>
            </HeaderLogo>
                {isDesktop &&
                <HeaderRight>
                    <HeaderJoinUs to="/join-us">join us</HeaderJoinUs>
                    <ButtonExtend as={Button} color={"#FFF"}><Link to={"/contact-us"}>Let's talk</Link></ButtonExtend>
                    <SocialsExtend color={"#000"} as={Socials}/>
                    <HeaderBurgerContainer onClick={() => setMenuState(!menuState)}>
                        <HeaderBurger>
                            <HeaderBurgerInner menuState={menuState}/>
                        </HeaderBurger>
                    </HeaderBurgerContainer>
                </HeaderRight>
            <Navbar menuState={menuState}/>
        </HeaderWrapper>

НАВБАР:

   const [open, setOpen] = useState(false);

       <Nav>
            {navLinks.map(i =>{
                return (  
                    <NavItem key={i.path} onClick={() => setOpen(props.menuState)}>
                        <StyledNavLink exact={i.exact} to={i.path} activeClassName={'CdTfP'}>
                            <span data-link={i.content.en}></span>
                            {i.content.en}
                        </StyledNavLink>
                    </NavItem>
                )
            })}
        </Nav>

Answer 1

Вам необходимо создать функцию в вашем header компоненте, которая может изменить ваш menuState и передать эту функцию с menuState вместе в Navbar компонент, а когда вам нужно изменить menuState, просто вызовите это function; например, вот так:

function Header(){
  const [menuState, setMenuState] = useState();

  return (
  <HeaderWrapper>
    <HeaderLogo>
        <Link to={"/"}>
            <img src={''} height="45" alt=""/>
        </Link>
    </HeaderLogo>
        {isDesktop &&
        <HeaderRight>
            <HeaderJoinUs to="/join-us">join us</HeaderJoinUs>
            <ButtonExtend as={Button} color={"#FFF"}><Link to={"/contact-us"}>Let's talk</Link></ButtonExtend>
            <SocialsExtend color={"#000"} as={Socials}/>
            <HeaderBurgerContainer onClick={() => setMenuState(!menuState)}>
                <HeaderBurger>
                    <HeaderBurgerInner menuState={menuState}/>
                </HeaderBurger>
            </HeaderBurgerContainer>
        </HeaderRight>
    <Navbar setMenuState={setMenuState} menuState={menuState}/>
  </HeaderWrapper>
  )
}

и в вашем Navbar просто передайте value, которое вы хотите установить как menuState значение, в props.setMenuState функцию