How does one component trigger a change in props of another component?
Answered
Philippine Crocodile posted this in #help-forum
Philippine CrocodileOP
Hello! I am creating a To-do site.
Each day has its own todo list, and each todo list has a set of tasks. The problem I have is that the client component that shows the list of previous todo lists needs to chang what the TodoTasks component renders if the user clicks on one of those previous Todo lists. I'm wondering how I would do that.
Here's the structure of the page.
Each day has its own todo list, and each todo list has a set of tasks. The problem I have is that the client component that shows the list of previous todo lists needs to chang what the TodoTasks component renders if the user clicks on one of those previous Todo lists. I'm wondering how I would do that.
Here's the structure of the page.
main page
-- TodoList (shows list of Todo lists from previous days)
-- TodoTasks (shows a list of tasks in the current active Todo list)return (
<div>
<h1>Todo Page</h1>
<ul className={styles.todoList}>
<ListTodoLists initalState={todoLists} />
<TodoList intitalTasks={tasks} />
</ul>
</div>
)21 Replies
okay so do you fetch all of todo lists and tasks at once?
@James4u okay so do you fetch all of todo lists and tasks at once?
Philippine CrocodileOP
Yea. The initial page is rendered on the server
so you must be fetching tasks of the first todo list item, right?
@James4u so you must be fetching tasks of the first todo list item, right?
Philippine CrocodileOP
Yep
I think using dynamic route or query param will be the solution
Answer
selecting one of the todo list item, it will be updating route slug or query param
and based on the query param you can refetch the tasks
Philippine CrocodileOP
That would actually fix it
Based on the id of the todo list in the query parameter, it would fetch the tasks of the Todo list and display kt
Is there a way to do it without relying on a query parameters?
Is there a way to do it without relying on a query parameters?
if you are about to do server-side data fetching, route slug or query param will be solutions
if you are okay with client side data fetching, you can have your api routes
Philippine CrocodileOP
Alright. Thanks for your help!
You are welcome! Please mark solution if it helped you 🙂
Philippine CrocodileOP
On second thought; this particular page requires lots of interactivity, so I'm just gunna make the entire page render on the client, instead of having the server do the initial render.
I tried the "query param in the URL" approach but not all the components in the page updated properly when using the
And even then, for some reason, the part of the page that displays all the todo lists isn't working for some reason, which makes no sense because the part ofthe code that fetchs tasks in the todo list has NOTHING to do with the part of the code that fetchs a list of todo lists.
My first experience with NextJS SSR, and I'm not enjoying it. Maybe its because I architechted/built the page wrong.
I tried the "query param in the URL" approach but not all the components in the page updated properly when using the
<Link> component to navigate between todo lists. I have to use a <a> HTML element to get it to fully refresh the page when navigating.And even then, for some reason, the part of the page that displays all the todo lists isn't working for some reason, which makes no sense because the part ofthe code that fetchs tasks in the todo list has NOTHING to do with the part of the code that fetchs a list of todo lists.
My first experience with NextJS SSR, and I'm not enjoying it. Maybe its because I architechted/built the page wrong.
well @Philippine Crocodile then just use your page.tsx as data loader (a server component with server side data fetching)
and then you can have a client component which receives data you fetched from the page.tsx
you can have full interactivity in your client component with data fetched on the server side
also using <a> tag loses benefits of next.js features
@Philippine Crocodile if you want, we can pair program on codesandbox
@James4u <@705244213414985758> if you want, we can pair program on codesandbox
Philippine CrocodileOP
Yea, I'd like that. I'm not home at the moment, though.
How does tomorrow at 12am CST sound? Also, I don't know how codesandbox is going to work out since Next is fetching todos from a local server, and I can't do port forwarding to expose that local server to the Internet, so I'd like to use VSCode Live Share instead.
How does tomorrow at 12am CST sound? Also, I don't know how codesandbox is going to work out since Next is fetching todos from a local server, and I can't do port forwarding to expose that local server to the Internet, so I'd like to use VSCode Live Share instead.
Philippine CrocodileOP
Nevermind. I fix the issues. Turns out the reason why the part of the page that shows a list of todo lists wasnt refreshing is because of a bug on my end. And the reason why tasks of the todo list wasnt refreshing was because there wasnt a useEffect watching for changes to the search params.