Destructuring and Rename Property

Destructuring and rename property

You could destructure with a renaming and take the same property for destructuring.

const a = { b: { c: 'Hi!' } };const { b: formerB, b: { c } } = a;
console.log(formerB)console.log(c);

Nested object destructuring and renaming

The same way you set a new name for A - {c: C}:

const obj = {a: 2, b: {c: 3}};
const {a: A, b:{c: C}} = obj;
console.log(C);

Destructuring assignment with rename and typing information

Information about the typing of the feature is available in the TypeScript 2.1 documentation:

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html

Object rests are the dual of object spreads, in that they can extract any extra properties that don’t get picked up when destructuring an element:

When the Rest portion of the feature is used, it enhances object destructuring by enabling us to collect the rest of the properties into a new object comprised of them.

We can write the type annotation as we would for any other value. This is prefered as it can stop your function signatures getting verbose For example

interface IRenderItem {
  item: String
}

function renderItem({ item: region }: IRenderItem): void {
  console.log(item);
}

ES6/ES2015 object destructuring and changing target variable

You can assign new variable names, like shown in this MDN Example

var o = { p: 42, q: true };
// Assign new variable namesvar { p: foo, q: bar } = o;
console.log(foo); // 42console.log(bar); // true  

How to rename variable (data) after destructuring (SWR hook for example)

you can try destructuring and rename property

export default function Panel() {
    const { data: data1, error: error1 } = useSWR("/api/customer", fetcher);
    const { data: data2, error: error2 } = useSWR("/api/user", fetcher);
    ...
    data.map(...)
}

and can access as data1, error1 and data2, error2.

How to rename a destructured parameter concisely in react?

Try:

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

Rename and add types when destructuring an object

As with normal Javascript destructuring, to put into a new variable name, put a colon after the property you want to rename, with the new identifier on the right:

logo: file

Then you need to set the type of the whole object being passed, which is done by putting : after the argument:

function save({ logo: file, name }: { logo: Blob; name: string; }) {

It looks a bit repetitive, but I don't think there's a better way.

How to destructure an array within an object and rename the variables created from it?

I guess, that's what you're after:

const service = {
    details: {
        overview: [{
                title: {
                    de: 'Mock Example',
                    en: 'Mock Example',
                },
                description: {
                    de: 'Lorem ipsum...',
                    en: 'Lorem ipsum...',
                },
            },
            {
                title: {
                    de: 'Mock Example 2',
                    en: 'Mock Example 2',
                },
                description: {
                    de: 'Lorem ipsum...',
                    en: 'Lorem ipsum...',
                },
            },
        ]
    }
}
 
const {details: {overview: [problem, solution]}} = service
      
console.log(problem, solution)

Renaming object keys destructuring with a symbol or a number

You can create object like from:to name

const totalValues = { '3V': 2.09, 'fg%V': 3.02, do_not_rename: 1 };
const renameFromTo = {
    '3V': '3PM',
    'fg%V': 'FG%',
};

const result = Object.entries(renameFromTo).reduce(
    (acc, [from, to]) => ({ ...acc, [from]: undefined, [to]: acc[from] }),
    totalValues,
);

console.log(result);

---

Related Topics