OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

QwikJS does not execute component to create context of state

  • Thread starter Thread starter Joshua
  • Start date Start date
J

Joshua

Guest
I am new to qwick and at the moment I am trying to develop some type of ToDo list. For that, I want to create a state when the user opens the site which holds his ToDos. This state should be useable by multiple components. To create that state, I have a component named stateShare. It creates a contextId, creates a Store with a dict, creates a context via useContextProvider - thats it.

Code:
interface TodoStore {
    lists: string[];
}

export const TodoContext = createContextId<TodoStore>('todoContext')

export const StateShare = component$(() => {
    const todoStore = useStore({lists: []});
    useContextProvider(TodoContext, todoStore);

    return null
})

One component in which I am trying to use the state is named DisplayTodo. It should get the context with useContext and then just log it to check if it has access and its serialized.

Code:
export const DisplayTodo = component$(() => {
    let todoList = useContext(TodoContext)

    console.log(todoList)

    return (
        <div>
        </div>
    )
})

The two components are returned by the default component in the index.tsx like that:

Code:
export default component$(() => {

  return (
    <>
    <StateShare />
    <DisplayTodo />
    </>
  );
});

But when I start the program I get the following error: Actual value for useContext(todo-context) can not be found, make sure some ancestor component has set a value using useContextProvider(). In the browser make sure that the context was used during SSR so its state was serialized.

I have already tried to move the creation of the context to another file, for example to the index.tsx like that:

Code:
interface TodoStore {
  lists: string[];
}

export const TodoContext = createContextId<TodoStore>('todoContext')

export default component$(() => {
  const todoStore = useStore({lists: []});
  useContextProvider(TodoContext, todoStore);

  return (
    <>
    <StateShare />
    <DisplayTodo />
    </>
  );
});

When I then use the DisplayTodo component in the return of the default component in the index.tsx, everything works just fine - but only in the index.tsx. As soon as I move the DisplayTodo to another component or to the layout.tsx return, I get the same error.

What am I doing wrong? How do I have to integrate the component to create the state and the context of it which every other component can use? Is my approach completly wrong? Which concept am I missing?
<p>I am new to qwick and at the moment I am trying to develop some type of ToDo list. For that, I want to create a state when the user opens the site which holds his ToDos. This state should be useable by multiple components.
To create that state, I have a component named stateShare. It creates a contextId, creates a Store with a dict, creates a context via useContextProvider - thats it.</p>
<pre><code>interface TodoStore {
lists: string[];
}

export const TodoContext = createContextId<TodoStore>('todoContext')

export const StateShare = component$(() => {
const todoStore = useStore({lists: []});
useContextProvider(TodoContext, todoStore);

return null
})
</code></pre>
<p>One component in which I am trying to use the state is named DisplayTodo. It should get the context with useContext and then just log it to check if it has access and its serialized.</p>
<pre><code>export const DisplayTodo = component$(() => {
let todoList = useContext(TodoContext)

console.log(todoList)

return (
<div>
</div>
)
})
</code></pre>
<p>The two components are returned by the default component in the index.tsx like that:</p>
<pre><code>export default component$(() => {

return (
<>
<StateShare />
<DisplayTodo />
</>
);
});

</code></pre>
<p>But when I start the program I get the following error:
Actual value for useContext(todo-context) can not be found, make sure some ancestor component has set a value using useContextProvider(). In the browser make sure that the context was used during SSR so its state was serialized.</p>
<p>I have already tried to move the creation of the context to another file, for example to the index.tsx like that:</p>
<pre><code>interface TodoStore {
lists: string[];
}

export const TodoContext = createContextId<TodoStore>('todoContext')

export default component$(() => {
const todoStore = useStore({lists: []});
useContextProvider(TodoContext, todoStore);

return (
<>
<StateShare />
<DisplayTodo />
</>
);
});
</code></pre>
<p>When I then use the DisplayTodo component in the return of the default component in the index.tsx, everything works just fine - but only in the index.tsx. As soon as I move the DisplayTodo to another component or to the layout.tsx return, I get the same error.</p>
<p>What am I doing wrong? How do I have to integrate the component to create the state and the context of it which every other component can use? Is my approach completly wrong? Which concept am I missing?</p>
Continue reading...
 

Latest posts

Top