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

[wootra]

I was interested in this issue because this is what I exactly want to solve. But the above answer (#2084 (comment)) does not solve the issue with children but avoided the problem using CSS.
It may solve this specific issue, but the question about passing context is not answered.
this is my Stackoverflow question which is very similar (which made me to find here)

My issue also is about iterating children and applying individual context based on the index of the children. I tried multiple approaches, but cannot find any working example.

import './App.css';
import { createContext, useContext, splitProps, createSignal, For, children as Children } from 'solid-js';
export const UserContext = createContext(0);

function App() {
	return (
		<>
			<UserContext.Provider value={3}>
				<ParentComponent>
					<Child />
					<Child />
					<Child />
				</ParentComponent>
			</UserContext.Provider>
		</>
	);
}

export default App;

export const ParentComponent = props => {
	console.log('parent');
	return (
		<For each={Children(() => props.children)()}>
			{(child, idx) => {
				console.log('child in for:' + idx());
				return <UserContext.Provider value={idx}>{child}</UserContext.Provider>;
			}}
		</For>
	);
};

export const Child = () => {
	const idx = useContext(UserContext);
	console.log('child', idx);
	return <div>I am child {idx}</div>;
};

this example is supposed to show

I am child 0
I am child 1
I am child 2

but never achieve the result because the Child component is never rendered after setting the UserContext's value is initialized in For component of ParentComponent. (but it uses the one in App component. if I don't wrap it in App component, it uses just 0 which is the default value of the UserContext)

I am child 3
I am child 3
I am child 3

When I see the console, it shows like this:

parent
child 3
child 3
child 3
child in for:0
child in for:1
child in for:2

What is interesting here is, When I render component instead of {child} in the ParentComponent, it renders as expected. But This code is to illustrate the issue, not to render Child component. My real issue is a lot more complex.

Also, when I don't even render {child} in the Parent component, still child is called and it will show no difference in the console.

export const ParentComponent = props => {
	console.log('parent');
	return (
		<For each={Children(() => props.children)()}>
			{(child, idx) => {
				console.log('child in for:' + idx());
				return <UserContext.Provider value={idx}>Ignore Child!</UserContext.Provider>; // <--- ignore child!
			}}
		</For>
	);
};

I think this is a bug. Even though it is not a bug, it is a limitation of the context which makes this framework so hard to use IF there is no solution for this.

[wootra]

I got an answer with the similar question: