Passing Context Variable to React Components in BigCommerce Stencil  

In BigCommerce, we can add React Components to our environment, which is awesome as it allows us to build complex components quickly. The downside is that we need to do some extra work to use the built-in data management provided by Stencil. This article will walk you through how to solve that problem and avoid having to make duplicate queries.

Prerequisite: Configure Stencil

To solve this problem, you first need to have Stencil properly configured to use react components. The documentation for that can be viewed here.

Taking a Look at the Header

Navigate to the page on which you have injected your react component and direct your attention to the header. For this example, I will use the home page. The YAML header can be seen below.

---
products:
    new:
        limit: 
    featured:
        limit: 
    top_sellers:
        limit: 
carousel: 
blog:
    recent_posts:
        limit: 
---

The header defines the front matter, which tells us what resources are available on any given template. Below the YAML defining our front matter, we can see the line that injects the products titled "new" to a context variable titled newProducts. This injects the list of products stored in products.new, as defined in the front matter, to the home page's context object under the variable name newProducts.

Home Page Class: Passing Data React Components

If we direct our attention to the Home Page class as defined below, we can see how this is useful for passing data to react components.

export default class Home extends PageManager {
    constructor(context) {
        super(context);
        this.initializeReact()
    }
    initializeReact() {
      console.log(this.context.newProducts)
      ReactDOM.render(<Pipeline products={this.context.newProducts} />, document.querySelector('#pipeline'));
    }
}

Solution: Passing Context Variable to React Component

The above class is the Page Manager for our home page. This is where we initialize the pipeline component that shows a slider with the newest objects on the site.

To avoid having to fetch additional data in the react component, we would like to pass the data that was already fetched using the front matter in the home page template.

To do this, we can simply pass the variable that we stored in the context as a prop to our react component. As we can see above, on line 11, we pass this.context.newProducts as though products prop to our Pipeline component.

Author: Maxwell Sherwin

---

Get stuck in a step during this article?

We like to update our blogs and articles to make sure they help resolve any troubleshooting difficulties you are having. Sometimes, there is a related feature to enable or a field to fill out that we miss during the instructions. If this article didn't resolve the issue, please use the chat and let us know so that we can update it!