# Adding a Section in My Account

In Scandi, several UI elements, including the My Account page, are organized in tabs:

![](/files/-Me4WM8wC_aknts9pY7y)

In this tutorial, we will learn to customize the theme by adding a new tab to the My Account page. If you follow along with this tutorial, you should be able to add any component to any tab in Scandi.

## Creating a New Component

First, we need to create a component responsible for displaying the content of the tab. This means creating a new subdirectory in the `component` directory with the required files. Using the `scandipwa` CLI utility, this step can be automated with a single command.

We will name our example component `PositiveAffirmations`:

```bash
scandipwa create component PositiveAffirmations
```

This should create some new files and give the following output:

```
NOTE!

     The following files have been created:
     src/component/PositiveAffirmations/PositiveAffirmations.component.js
     src/component/PositiveAffirmations/PositiveAffirmations.style.scss
     src/component/PositiveAffirmations/index.js
```

Now, let's edit the `.component.js` file to render some example content. For simplicity, our example will contain positive self-affirmations copy-pasted from the internet:

{% code title="src/component/PositiveAffirmations/PositiveAffirmations.component.js" %}

```jsx
    render() {
        return (
            <div block="PositiveAffirmations">
                <p>{ __('Today, I am brimming with energy and overflowing with joy.') }</p>
                <p>{ __('I live in the moment while learning from the past and preparing for the future.') }</p>
                <p>{ __('Life is beautiful.') }</p>
            </div>
        );
    }
```

{% endcode %}

This will help customers gain confidence and boost their mood while they adjusting the settings for their account.

{% hint style="info" %}
Wondering what the `{ __("") }` magic is for? They are necessary to enable translating the text. You could remove them, and the app would still work, but only in English. Let's break down what that syntax does:

1. The curly braces `{}` allow us to escape from JSX (that HTML-like syntax) and write normal JavaScript expressions.
2. `__` is a special function-like directive in Scandi. It allows us to translate the content.
3. The text needs to be put in quotes `""` so that it can be processed like any other JavaScript string.
   {% endhint %}

Great! Now we have created the component, but it's not yet visible on the page, because we haven't used it anywhere – that's the next step.

## Inspecting the Codebase

To add a new tab, we need to find out which component is responsible for rendering all of the My Account tabs. Using [React Developer tools](/developing-with-scandi/developer-tools.md#browser), we can identify the `MyAccountTabList` component:

![](/files/-Me4Xc9hQ9VChzZedwSH)

Inspecting the source code and searching for usages of `<MyAccountTabList`, we find that the tabs are passed as props from `MyAccount.component.js`

{% code title="node\_modules/@scandipwa/scandipwa/src/route/MyAccount/MyAccount.component.js" %}

```jsx
    renderContent() {
        const {
            tabMap,
	          // ...
        } = this.props;
	      // ...

	const TabContent = this.renderMap[activeTab];
        const { name } = tabMap[activeTab];

        return (
            <ContentWrapper>
                <MyAccountTabList
                  tabMap={ tabMap }
                  activeTab={ activeTab }
                  changeActiveTab={ changeActiveTab }
                  onSignOut={ onSignOut }
                />
		            <div block="MyAccount" elem="TabContent">
                    <h2 block="MyAccount" elem="Heading">{ name }</h2>
                    <TabContent isEditingActive={ isEditingActive } />
                </div>
            </ContentWrapper>
        );
    }
```

{% endcode %}

The tab components themselves are specified in the `renderMap`:

{% code title="node\_modules/@scandipwa/scandipwa/src/route/MyAccount/MyAccount.component.js" %}

```jsx
    renderMap = {
        [DASHBOARD]: MyAccountDashboard,
        [MY_ORDERS]: MyAccountMyOrders,
        [MY_WISHLIST]: MyAccountMyWishlist,
        [ADDRESS_BOOK]: MyAccountAddressBook,
        [NEWSLETTER_SUBSCRIPTION]: MyAccountNewsletterSubscription,
        [MY_DOWNLOADABLE]: MyAccountDownloadable
    };
```

{% endcode %}

The metadata (such as the tab name), is passed to the component as a prop from `MyAccount.container.js`, where the `tabMap` is defined:

{% code title="node\_modules/@scandipwa/scandipwa/src/route/MyAccount/MyAccount.container.js" %}

```jsx
    tabMap = {
        [DASHBOARD]: {
            url: '/dashboard',
            name: __('Dashboard')
        },
        [ADDRESS_BOOK]: {
            url: '/address-book',
            name: __('Address book')
        },
        [MY_ORDERS]: {
            url: '/my-orders',
            name: __('My orders')
        },
        [MY_DOWNLOADABLE]: {
            url: '/my-downloadable',
            name: __('My downloadable')
        },
        [MY_WISHLIST]: {
            url: '/my-wishlist',
            name: __('My wishlist'),
            headerTitle: () => this.getMyWishlistHeaderTitle()
        },
        [NEWSLETTER_SUBSCRIPTION]: {
            url: '/newsletter-subscription',
            name: __('Newsletter Subscription')
        }
    };
```

{% endcode %}

We need to override the `.container` to add a new tab entry, but we also need to override the `.component` to specify how to render it.

## Adding a New Tab

As we found above, we need to override the `MyAccount` route to customize the tabs. Again, the `scandipwa` CLI can do this automatically for us. First, enter this command:

```
scandipwa override route MyAccount
```

Then, the `scandipwa` CLI will interactively ask you which parts of the `MyAccount` route you want to override. We only want to override the `MyAccountContainer` class in the `MyAccount.container.js` file, and the `MyAccount` class in the `.component` file; leave the other answers blank.

```
? Choose things to extend in MyAccount.component.js MyAccount
? What would you like to do with styles? Keep
? Choose things to extend in MyAccount.config.js 
? Choose things to extend in MyAccount.container.js MyAccountContainer

NOTE!

     The following files have been created:
     src/route/MyAccount/MyAccount.component.js
     src/route/MyAccount/MyAccount.container.js
```

The command will automatically create the boilerplate necessary for overriding the file. Now, it's up to us to make the necessary changes in these files.

First, open the `MyAccount.component` file and configure the `renderMap` to include our custom component.

{% code title="src/route/MyAccount/MyAccount.component.js" %}

```jsx
export const POSITIVE_AFFIRMATIONS = 'affirmations';

/** @namespace TutorialCsaApp/Route/MyAccount/Component/MyAccountComponent */
export class MyAccountComponent extends SourceMyAccount {
    renderMap = {
        [DASHBOARD]: MyAccountDashboard,
        [MY_ORDERS]: MyAccountMyOrders,
        [MY_WISHLIST]: MyAccountMyWishlist,
        [ADDRESS_BOOK]: MyAccountAddressBook,
        [NEWSLETTER_SUBSCRIPTION]: MyAccountNewsletterSubscription,
        [MY_DOWNLOADABLE]: MyAccountDownloadable,
        [POSITIVE_AFFIRMATIONS]: PositiveAffirmations // <-- added!
    };
}
```

{% endcode %}

Now, `MyAccountComponent` knows how to render our custom tab. We still need to configure the tab URL and title for it to appear in the list. For this, we can override the `tabMap` field of the `MyAccountContainer`.

{% code title="src/route/MyAccount/MyAccount.container.js" %}

```jsx
import { POSITIVE_AFFIRMATIONS } from './MyAccount.component';

/** @namespace TutorialCsaApp/Route/MyAccount/Container/MyAccountContainer */
export class MyAccountContainer extends SourceMyAccountContainer {
    tabMap = {
        [DASHBOARD]: {
            url: '/dashboard',
            name: __('Dashboard')
        },
        // [...] copy all the original entries from MyAccountContainer.tabMap here
	// (unless you want to intentionally remove them)

        [POSITIVE_AFFIRMATIONS]: { // <-- new entry - custom tab!
            url: '/affirmations',
            name: __('Positive Affirmations')
        }
    };
}
```

{% endcode %}

{% hint style="warning" %}
Scandi is very strict about code style, and you might have to fix some issues for the ESLint check to pass. Most issues can be automatically fixed by running `eslint --fix src`.
{% endhint %}

## Result

Let's check the brand-new My Account tab – as expected, it appears among the other tabs!

![](/files/-Me4fXsWqu5akRv6i1b0)

Congrats! You have now learned to add new tabs to Scandi components. And you will find that similar patterns with `renderMap` can be overridden in the same way – you can add, remove, or modify which components are rendered by configuring an object or array.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.scandipwa.com/tutorials/customizing-your-theme/customizing-javascript/adding-a-section-in-my-account.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.