Why can't my code use context? about solid

[deluksic]

On the other hand, depending on what you need, this seems like overkill. You should be able to get away with applying :first-child and :last-child in CSS with no js needed.

[deluksic]

Two things here.

1. Running props.children in component body "reads" the children, i.e. instantiates them outside of the context, and then you only put the child inside the context after it was initialized.
2. Use children helper in order for your component to stay reactive and instantiate children only once. (reading children once in component body will break reactivity). Remember props.children will recreate children every time it is accessed.

[thep0y]

On the other hand, depending on what you need, this seems like overkill. You should be able to get away with applying :first-child and :last-child in CSS with no js needed.

The Input component only needs to add some classes when it is a child component of Compact, and cannot be styled solely through first-child and last-child.

[thep0y]

Two things here.

1. Running props.children in component body "reads" the children, i.e. instantiates them outside of the context, and then you only put the child inside the context after it was initialized.
2. Use children helper in order for your component to stay reactive and instantiate children only once. (reading children once in component body will break reactivity). Remember props.children will recreate children every time it is accessed.

Using the children helper has no effect on useContext. The context received in Input is always undefined. The code above is just for illustration.

Using the same approach, it is possible to pass and receive context in React.

[deluksic]

Sorry I overlooked that the context is inside the for loop. I believe what you're trying to do is not possible because accessing children instantiates all of them, so there is no opportunity to inject a different context for each child.

I don't have the full context of your application code, but I would strongly recommend not going for this pattern even if React supports it. You will be generating a different context each with two accessor functions for each child only to style first and last element differently.

Could you perhaps add the compact class if it is a child of compact, and then in css use .compact:first-child?

[thep0y]

In Compact, child components need to have unique styles by adding their respective -compact classes, such as input-compact and button-compact. These styles should not be implemented in compact.scss but rather in input.scss or button.scss, as -compact may use some unique variables. For example, input-compact needs to use var(--input-boder-radius), and input-compact:first-child needs to use var(--input-border-radius-sm).

[deluksic]

That should be relatively easy:

1. Compact renders a <CompactContext.Provider value={true}> around its children (default is false)
2. Children const isCompact = useConext(CompactContext) and render their respective .input-compact or .button-compact class (if isCompact) which you can also additionally style for .input-compact:first-child etc.

[thep0y]

The class I want to add is not only first-child and last-child, but also the size and shape of Input and Button when they are children of Compact, which are also passed down from the context of Compact.

[ryansolid]

This is a good discussion. I'm going to move the issue there. It is behaving as expected. There is no bug here but I'm interested to see how a solution forms out. We do have this sort of chicken and the egg issue since you need to create the elements to iterate over them so there is no way to get context in to them before creating them.