> For the complete documentation index, see [llms.txt](https://ploegert.gitbook.io/til/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ploegert.gitbook.io/til/programmy/javascript/destructure-with-access-to-nested-value-and-parent-value.md).

# Destructure With Access To Nested Value And Parent Value

A destructuring pattern that I often see (especially in React code) is to peel off a nested value in the argument declaration of a function.

```javascript
const Component = ({ data: { name: displayName }}) => {
  return (
    <div>
      <h1>{displayName}</h1>
      <SubComponent />
    </div>
  );
};
```

On its own this works quite well, but what happens when you need access to the full set of `data` as well as the nested `name` value? I often see this.

```javascript
const Component = ({ data }) => {
  const { name: displayName } = data;
  return (
    <div>
      <h1>{displayName}</h1>
      <SubComponent data={data} />
    </div>
  );
};
```

ES6 destructuring is flexible. You can skip the `const` line and keep everything in the argument declaration.

```javascript
const Component = ({ data: { name: displayName }, data }) => {
  return (
    <div>
      <h1>{displayName}</h1>
      <SubComponent data={data} />
    </div>
  );
};
```

You can re-reference the `data` value after the nested destructuring.