# 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: 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/scandipwa-social-share/step-9-render-plugins-and-mstp-plugin-component-creation.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.