Destructure JS object with similar children

Question

I have the following setup, but keep getting the error: Argument name clash. How can I destructure this and still maintain the value?

const Message = ({message: { user, text }, nickname}, {quest: { user, text }, nickname} ) =>{ 

Answer 1

You'll have to rename one of the "clashing" variables, like this:

const func = ({ a }, { a: b }) => {
  console.log(a, b);
}

const obj = { a: 'foo' };
func(obj, obj);

Answer 2

You can rename the params to resolve the variable name conflicts like:

const Message = ({
   message: {
      user: message_user,
      text: message_text
   },
   nickname: message_nickname
}, {
   quest: {
      user: quest_user,
      text: quest_text
   },
   nickname: quest_nickname
}) => {

}

Or, you can also try this if you want to use same variable names, but you cannot work with all at the same time:

const Message = (param1, param2) => {
   let { message, nickname } = param1, quest;
   let { user, text } = message;
   // Do you stuff realed to message, user, text & nickname

   ({ quest, nickname } = param2);
   ({ user, text } = quest);
   // Do you stuff realed to quest, user, text & nickname
}