Why can't my code use context?

[thep0y]

Describe the bug

I want to add some classes to each child of Compact, but after running the above code, the context printed in the console is undefined, and I cannot figure out where the coding error is.

Your Example Website or App

Nope

Steps to Reproduce the Bug or Issue

I wrote three components.

1. Compact

import { JSXElement, createContext, For } from "solid-js";

interface CompactItemType {
  isFirst?: boolean;
  isLast?: boolean;
}

export const CompactContext = createContext<CompactItemType>();

interface CompactProps {
  children: JSXElement;
}

const Compact = (props: CompactProps) => {
  const childNodes = Array.isArray(props.children)
    ? props.children
    : [props.children];

  return (
    <div class="compact">
      <For each={childNodes}>
        {(node, idx) => (
          <CompactContext.Provider
            value={{
              isFirst: idx() === 0,
              isLast: idx() === childNodes.length - 1,
            }}
          >
            {node}
          </CompactContext.Provider>
        )}
      </For>
    </div>
  );
};

export default Compact;

2. Input

import { useContext } from "solid-js";
import { CompactContext } from "./compact";

const Input = () => {
  const context = useContext(CompactContext);
  console.log(context); // => undefined

  return (
    <input classList={{ first: context?.isFirst, last: context?.isLast }} />
  );
};

export default Input;

3. App

import Compact from "./compact";
import Input from "./input";

const App = () => {
  return (
    <Compact>
      <Input />

      <Input />
    </Compact>
  );
};

export default App;

Expected behavior

Input should receive the data passed by Compact through context.

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[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.

[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.

[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.

[deluksic]

Please take a look at this example. It should do everything you requested:

https://playground.solidjs.com/anonymous/a63a01c0-446c-4424-a307-46cd58803319