---
title: "Render widgets with the WidgetsContainer component"
slug: "render-widgets-with-the-widgetscontainer-component"
abstract: "How to use the WidgetsContainer component from Sitecore Discover JS SDK to render widgets in your React application."
---
# Render widgets with the WidgetsContainer component

Using the content, styles, and configuration of content personalization widgets that reside in the Customer Engagement Console (CEC), the `WidgetsContainer` component renders the SEO, banner, and HTML block widgets. For merchandising widgets, it requires widget components that you can create by passing UI components to `widget` or `setWidget` functions.

> [!warning]
> The `WidgetsContainer` component is deprecated and replaced by [PageWidgetsProvider](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/working-with-js-sdk-and-ui-components/pagewidgetsprovider.html "PageWidgetsProvider").
>
> For the same functionality, you can use:
>
> -   [Render widgets by wrapping them in the PageWidgetsProvider component](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/working-with-js-sdk-and-ui-components/render-widgets-by-wrapping-them-in-the-pagewidgetsprovider-component.html "Render widgets by wrapping them in the PageWidgetsProvider component")

When using the `WidgetsContianer` component, you do not have to add widget tags within it, because it can retrieve the following:

- The list of widgets to be rendered from the Widget Provider.
- The merchandising widget components from the the host component.
- The content personalization widget components from the JS SDK.

> [!note]
> When the `WidgetsContainer` is present within the `WidgetsProvider` tags, all content personalization widgets configured for a particular URL or page render correctly.

To render a simple query hooked recommendation widget with `WidgetsContainer`:

1. In your React application, in the folder called `widget_components`, in a file called `myRecommendationComponent.js`, paste the following code block.

    ```js
    import {
      useRecommendation
    } from "@sitecore-discover/react";

    setWidget("<rfkid_rec_widget>", {
            type: WidgetDataType.RECOMMENDATION,
            component: MyRecommendationComponent,
            options: {
                props: {
                    title: 'RFKID 1',
                    productsToDisplay: 4
                }
            }
        );

    const MyRecommendationComponent = ({ title='', productsToDisplay = 6 }) => {
      const {
        actions: { onProductClick },
        queryResult: { isLoading, isFetching, data: { content: { product: { value: products = [] } = {} } = {} } = {} },
      } = useRecommendation((query) => {
        query.getRequest().setNumberProducts(productsToDisplay);
      });

      const ready = !isLoading && !isFetching;

      if (!ready || (ready && products.length === 0)) {
        return '';
      }

      return (
        <div>
            {title && <h3>{title}</h3>}
            {products.map((p, index) => (
                <div key={`product-${index}`}>
                    <h3><a href="#" onClick={() => onProductClick({ sku: p.sku || '' })}>{p.name}</a></h3>
                    <img src={p.image_url} />
                    {p.final_price && <span>${p.final_price}</span>}
                </div>
            ))}
        </div>
      );
    };
    ```

2. In your React application, in a page component, to initialize the widget using the `setWidget` method, paste the following code block.

    ```js
    import {
      setWidget,
      WidgetDataType,
      WidgetsProvider,
    } from "@sitecore-discover/react";

    import MyRecommendationComponent from './widget_components/myRecommendationComponent';

    const Page = () => {
        return (
             <WidgetsProvider
                    env='<environment>'
                    customerKey='<customer key>'
                    apiKey='<api key>'
                    useToken
                >
                <WidgetsContainer />
            </WidgetsProvider>
        );
    }
    ```

3. At compile time, if errors are displayed, fix import statements to match locations and names.