how to refer to nested components?

[fwermus]

I am developing a shopping cart which is using useContext hook. This shopping cart, count products, which can be listed and added to it.

I want to adapt the following shopping cart example to haunted js project:

https://github.com/oygen87/react-context-tutorial/

But, I have found an issue that stops me to finish my work. According to the following file:

https://github.com/oygen87/react-context-tutorial/blob/master/src/index.js

I can refer a context(CartProvider) to any children component

https://github.com/oygen87/react-context-tutorial/blob/master/src/CartContext.js

with {props.children}

How can I express props.children in haunted js?

Instead, as a hacked, I wrote down my children in my provider file:

export const CartContext = createContext('cartContext');

const ProductPickProvider = props => { const [cart, setCart] = useState([]); return html <ql-cart-context-provider .value=${[cart, setCart]} > <div> <ql-product-cart> </div> <div> <ql-product-list> </ql-product-list> </div> </ql-cart-context-provider> ; };

customElements.define('ql-cart-context-provider', CartContext.Provider); customElements.define('ql-cart-context-consumer', CartContext.Consumer); customElements.define('ql-product-provider', component(ProductPickProvider));

[matthewp]

Have you looked here? https://github.com/matthewp/haunted#usecontext

Contexts are created using createContext which I don't see in your example.

[fwermus]

I rephrased the question above.