> 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)