context stuff

sku.js

/** @jsx jsx */
import React, { Component } from 'react';
import { Styled, jsx } from 'theme-ui'
import { useSkus, CartProvider } from '../context/shopping-cart';

const Sku = (props) => {

    console.log(props)

    const redirectToCheckout = async (event) => {
        event.preventDefault();

        const { skuID } = props;


        const { error } = await this.stripe.redirectToCheckout({
            items: [{ sku: skuID, quantity: 1 }],
            successUrl: `http://localhost:8000/`,
            cancelUrl: `http://localhost:8000/`,
        })
        if (error) {
            console.warn("Error:", error)
        }

    }

    const { name, price, image, skuID } = props;
    const { addItem } = useSkus();

    return (
            <div>
                <Styled.img src={image} />
                <Styled.p>{name}</Styled.p>
                <Styled.p>$ {price}</Styled.p>
                <button onClick={redirectToCheckout}>Purchase item</button>
                <button onClick={() => addItem(skuID)}>Add to Cart</button>
            </div>
    )

}


export default () => (
    <CartProvider>
        <Sku />
    </CartProvider>
)

If you use this file as a component, it'd be something like this, right?

import React from 'react';
import Sku from './sku';

export default () => (
	<Sku />
);

If you wanted to pass props, you could modify the default export of sku.js like so:

export default props => (
  <CartProvider>
    <Sku {...props} />
  </CartProvider>
)

And then use it like so:

import React from 'react';
import Sku from './sku';

export default () => (
	<Sku name="Product Name" price={10.00} image="https://example.com/image.jpg" sku="123ABC" />
);

Does that help?