how to refer to nested components?

[Fernando]

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));

[Matthew Phillips]

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

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

[Fernando]

I rephrased the question above.