community!
This is my first StackOverflow question since I could find most of the answers so far, but this issue is very hard to find. I could see similar questions, but it does not resolve my intention and focusing on making the specific problem rather than answering the fundamental issue.

I want to fill up in the context once children elements are loaded. I have ParentComponent which will hold ContextProvider, and the context will pass

import './App.css';
import { createContext, useContext, splitProps } from 'solid-js';
export const UserContext = createContext({ idx: 0 });

function App() {
    return (
        <>
            <ParentComponent>
                <Child />
                <Child />
                <Child />
            </ParentComponent>
        </>
    );
}

export default App;

export const ParentComponent = orgProps => {
    const [local, props] = splitProps(orgProps, ['children']);
    const children = Array.isArray(local.children) ? local.children : [local.children];
    console.log('parent');
    return children.map((child, idx) => <Wrapper idx={idx}>{child}</Wrapper>);
};

export const Wrapper = props => {
    const [local, rest] = splitProps(props, ['children']);
    console.log('wrapper', rest.idx);
    return <UserContext.Provider value={{ idx: rest.idx }}>{local.children}</UserContext.Provider>;
};

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

what I am expecting is seeing this.

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

but what I actually see is this.

I am child 0
I am child 0
I am child 0

I added console.log to see which one is loading first, and what I am seeing in the console is like this:

child 0
child 0
child 0
child 0
child 0
child 0
parent
wrapper 0
wrapper 1
wrapper 2

As you see, the loading priority is children first and context wrapper is later which makes passing information to the child impossible.

Is there a way to control loading priority? Or is it a Solidjs’s bug?

as I expect this, even though the children is rendered first, once the context value is given, the children has to be rendered once more since the value of it is changed. But seems like it does not render again. I tried to make the idx to signal, but still have no luck.

Thank you!

I am trying to pass an extra values into children components not through props but through context. its value through the context is chosen based on its index. Whatever the value is given from the context to the children, children has to re-render to handle the newly given data from the context.