How to rename a destructured parameter concisely in react?

Question

I thought that I would be able to use the follow syntax but it doesn't work as expected ('renamed' not defined):

const test= ({ var1, var2, renamed = var3 }) => { ...

I see that I can just do the following, but I wondered if there is a more concise way to do it from within the parenthesis. Many thanks.

const test= ({ var1, var2, var3 }) => { ...
const renamed = var3; ...

3

change to `renamed: var3` – Tal Rofe Jan 08 '21 at 08:30

score 12 · Accepted Answer · answered Jan 08 '21 at 08:30

12

Try:

const test = ({ var1, var2, var3: renamed }) => { ...

answered Jan 08 '21 at 08:30

CD..

72,281
25
154
163

Ah, ok I tried renamed : var3, wrong way round! I don't understand why that way around though – user1088793 Jan 08 '21 at 08:33

score 2 · Answer 2 · answered Jan 08 '21 at 08:32

Your destructuring syntax is wrong, the key comes first followed by a colon : and then the new variable name:

key: newName = defaultValue

const test= ({ var1, var2, var3: renamed = 2 }) =>  console.log(renamed);

var1 = 0;
var2 = 1;
var3 = 2;
test({ var1, var2, var3 })
test({ var1, var2, var3: undefined })

How to rename a destructured parameter concisely in react?

2 Answers2