React comes back with an unexpected token error when I do a dynamic destructuring of my object

Question

I'm updating an input field with an onChange event in React.

const handleUpdateText = (id, name, text) => {
  const newItems = items.map( item => {
  if (item.id === id) {
    return {...item, [menuLang][name]:text } // <-- error here at ][
  }
  return item;
  } )

  setItems(newItems);
}

name and text and name attribute and value of target input field.

menuLang is a state variable (string, eg "en").

The items are something like this:

{
  id: 1,
  type: "menuitem",
  isVisible: true,
  en: {
    name: "Salad",
    desc: "Fresh, seasonal ingredients",
  },
  price: "10",
},

Without dynamic destructuring it work fine:

    const newItem = {...item}
    newItem[menuLang][name] = text;
    return newItem;
    // instead of: return {...item, [menuLang][name]:text }

Any ideas what's the mistake?

Answer 1

use computed property name

let item={id:1,type:"menuitem",isVisible:!0,en:{name:"Salad",desc:"Fresh, seasonal ingredients"},price:"10"};

console.log(item)

let name = 'name'

let text = "Orange"

let menuLang = 'en'

item = {...item,[menuLang]:{...item[menuLang],[name]:text}}

console.log(item)