条件（动态）解构

Question

Depending on the selected language, I need to destruct the object and get the desired value.
How do I do this so as not to destruct the entire object?

const translate = {
   "navMenu1": {
      "en": "Menu 1",
      "ru": "Меню 1"
   },
   "navMenu2": {
      "en": "Menu 2",
      "ru": "Меню 2"
   },
   "navMenu3": {
      "en": "Menu 3",
      "ru": "Меню 3"
   }
}

const Header = props => {
  const { lang } = props;

  const {
    navMenu1,
    navMenu2,
    navMenu3
  } = translate;

  return (
    <header className={cnGreetingHeader}>
      <div>-Logo-</div>
      <nav className={cnNav}>
        <div className={cnItem}>{navMenu1[lang]}</div>
        <div className={cnItem}>{navMenu2[lang]}</div>
        <div className={cnItem}>{navMenu3[lang]}</div>
      </nav>
    </header>
  );
};

I want instead

<div className={cnItem}>{navMenu1[lang]}</div> 

Use

<div className={cnItem}>{navMenu1}</div>

Important: I would like an answer that uses destructuring assignment, if possible.

Answer 1

Altougth you asked destructing, you can just map the object values, its more scalable, what happens when you have much more nav items?

<nav className={cnNav}>
  {Object.values((navMenu) => (
    <div key={navMenu.id} className={cnItem}>
      {navMenu[lang]}
    </div>
  ))}
</nav>

Answer 2

You could take a nested destructuring and take the outer name as variable.

 const translate = { navMenu1: { en: "Menu 1", ru: "Меню 1" }, navMenu2: { en: "Menu 2", ru: "Меню 2" }, navMenu3: { en: "Menu 3", ru: "Меню 3" } }, Header = props => { const { lang } = props, { navMenu1: { [lang]: navMenu1 }, navMenu2: { [lang]: navMenu2 }, navMenu3: { [lang]: navMenu3 } } = translate; console.log(navMenu1); console.log(navMenu2); console.log(navMenu3); }; Header({ lang: 'en' });