Как сделать пропажу меню при клики React?

Question

[Даниил Секретов]

Заранее спасибо за внимание! У меня есть код на React, там при нажатие на текст Eng выпадает меню с Eng, Rus, עִברִית
сейчас сделано что при нажатие на какой то текст из меню вызывается определенный компонет, как сделать так что бы допустим при нажатие на Eng, скрывалось это меню и появлялось как изначально текс в кнопке нажатие появилось снова меню и так работало со всеми языками. Код: , при повторном

import React, { useState } from 'react';
import AppRu from './App-ru';
import AppEng from './App-eng';
import AppHebrew from './App-hebrew';
import stylesHeader from './components-ru/headers/Header.module.css';
import { Helmet } from 'react-helmet';
import AppButtonLanguage from './App-button-language.module.css'
function App() {
  const [language, setLanguage] = useState(false);
  const [languageRus, setLanguageRus] = useState(false);
  const [languageEng, setLanguageEng] = useState(false);
  const [languageHebrew, setLanguageHebrew] = useState(false);

  const MenuButton = () => {
    setLanguage(!language);
    setLanguageEng(!languageEng)
  };

  const ButtonlanguageRus = () => {
    setLanguageRus(true);
    setLanguageEng(false);
    setLanguageHebrew(false);

  };

  const ButtonlanguageEng = () => {
    setLanguageRus(false);
    setLanguageEng(true);
    setLanguageHebrew(false);
  };

  const ButtonlanguageHebrew = () => {
    setLanguageRus(false);
    setLanguageEng(false);
    setLanguageHebrew(true);
  };

  return (
    <div>
      {language ? null : (
        <div>
          <AppEng/>
          <div className={stylesHeader.languageSettingsButton} onClick={MenuButton}>
          <h1 className={stylesHeader.languageSettingsText} onClick={MenuButton}>Eng</h1>
        </div>
        </div>
        
      )}
      

      {language && (
        <div className={AppButtonLanguage.Vector}>
          <h1 className={AppButtonLanguage.Eng} onClick={ButtonlanguageEng}>
            Eng
          </h1>
          <div className={AppButtonLanguage.VectorTwo} />
          <h1 className={AppButtonLanguage.Rus} onClick={ButtonlanguageRus}>
            Rus
          </h1>
          <h1 className={AppButtonLanguage.AppHebrew} onClick={ButtonlanguageHebrew}>
            עִברִית
          </h1>
        </div>
      )}

      {languageRus && <AppRu />}
      {languageHebrew && <AppHebrew />}
      {languageEng && <AppEng />}

      
    </div>
  );
}

export default App

Можете дать подсказку? Буду благодарен за любую помощь!

Comments

[chemdev]

Согласись, все таки достаточно одного стейта с языком, и пока нет геопозиционирования достаточно назначать дефолтным любой в зависимости от предполагаемой ЦА. А касательно меню выбора языка, для него можно использовать булевый стейт (развернута, не развернута). В кнопках достаточно записать функции в виде: onClick={() => setLanguage('ru')}

Answer 1

[LI4NOOST]

Если я все правильно понял, тебе нужно поменять текст на кнопке, когда выбран определенный язык. Тогда будет примерно так:
Если прям по топроному то, создаем функцию, которая будет принимать язык и состояние, которое будет храниться:

const [currentLang, setCurrentLang]=useState("")
const setLang =(lang)=>{
setCurrentLang(lang)
}

Далее тебе нужно на каждую активную кнопку кинуть функцию с соответствующим параметром. К примеру:

<h1 className={AppButtonLanguage.Eng} onClick={()=>{setLang("Eng")}}>
            Eng </h1>

Ну а в нужном тебе месте это состояние подставляешь:

<h1 className={stylesHeader.languageSettingsText} onClick={MenuButton}>{currentLang}</h1>

А по хорошему делать конструкцию switch case. Ну и в функцию setLang, так же можешь сделать закрытие попапа своего

Comments

[Даниил Секретов]

Спасибо за ответ, но все равно не помогло все не так просто, компоненты будут совещаться в таком случае

[LI4NOOST]

Даниил Секретов, Попробуйте подробнее описать, что происходит, я попробую помочь

Answer 2

[Александр Кокорин]

chemdev тебе правильно все написал в комменте.
И если вдруг после всех действий, которые он описал ты захочешь чтобы окошко сворачивалось еще и при клике вне его, то можно использовать библиотеку ClickAwayListener.
Код будет выглядеть так:

{language && ( <ClickAwayListener onClickAway={функция которая задает окну true & false}><div> </div> </ClickAwayListener> )}

Comments

[Даниил Секретов]

Спасибо, но мне это не нужно. Ошибка была в дргуом