> For the complete documentation index, see [llms.txt](https://docs.scandipwa.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.scandipwa.com/tutorials/scandipwa-social-share/step-9-render-plugins-and-mstp-plugin-component-creation.md).

# STEP-9 render Plugins and MSTP Plugin, Component creation

[**STEP-9**](https://github.com/GAkim/SocialShareGraphQl/tree/STEP-9)

{% embed url="<https://www.youtube.com/watch?v=nAvs8vrxf8Y>" %}

We want to display our social share under the product short description.\
Product short description rendering is located inside the **ProductAction** component, so at first, we going to plugin into **ProducAction Container mapStateToProps** adding our redux state, and then into Short description render.

1. In **\<SOURCE>/plugin** create file **ProductActionContainerMSTP.plugin.js**

{% code title="scandipwa-socialshare/src/plugin/ProductActionContainerMSTP.plugin.js" %}

```javascript
const mapStateToProps = (args, callback, instance) => {
   const [state] = args;

   return {
       ...callback(...args),
       socialShare: state.SocialShareReducer.socialShare
   };
};

export default {
   'Component/ProductActions/Container/mapStateToProps': {
       function: mapStateToProps
   }
};
```

{% endcode %}

2\. In **\<SOURCE>/plugin** create file **ProductActionComponent.plugin.js**

{% code title="scandipwa-socialshare/src/plugin/ProductActionComponent.plugin.js" %}

```javascript
import { lazy, Suspense } from 'react';

export const SocialShare = lazy(() => import(
   /* webpackMode: "lazy", webpackChunkName: "social-share" */
   '../component/SocialShare'
   ));

const renderShortDescription = (args, callback, instance) => (
   <>
       { callback.apply(instance, args) }
       { renderSocialShare(instance.props) }
   </>
);

const renderSocialShare = (props) => {
   const {
       socialShare: {
           socialShareConfig: {
               enabled, productPage, rounded, size
           }, providers
       },
       product: { name }
   } = props;

   if (!enabled && !productPage) {
       return false;
   }

   return (
       <section
           block="ProductActions"
           elem="Section"
           mods={ { type: 'social' } }
       >
           <Suspense fallback={ null }>
               <SocialShare
                   isRounded={ rounded }
                   size={ size }
                   providers={ providers }
                   quote={ name }
               />
           </Suspense>
       </section>
   );
};

export const config = {
   'Component/ProductActions/Component': {
       'member-function': {
           renderShortDescription
       }
   }
};

export default config;

```

{% endcode %}

3\. Using console navigate to **scandipwa-socialshare** and execute\
`scandipwa create component SocialShare`

4\. Edit render method of the newly created component

{% code title="scandipwa-socialshare/src/component/SocialShare/SocialShare.component.js line 11 - 17" %}

```javascript
render() {
   return (
       <div block="SocialShare">
           { __('SocialShare') }
       </div>
   );
}
```

{% endcode %}

5\. Go to the frontend product page and check if the content is rendered.

![](https://lh6.googleusercontent.com/UYnTxlwP9HBf2cNcaUIMF_U3H8qaq3wQCSvFwFKhNeR6qH85569EGOIm6QNw-QNqwaAZDhPPAGPnQNiI5LjfxNZEmJWni44-axoAhjif748VVI2IiKKrQa-qBgeazUmQAELXX_Ye)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.scandipwa.com/tutorials/scandipwa-social-share/step-9-render-plugins-and-mstp-plugin-component-creation.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.