Next13 unable to trigger state in parent layout from child component

Answered

Tufted Flycatcher posted this in #help-forum

Tufted FlycatcherOP

2023-10-28T05:10:37.000Z

I'm unable to trigger state changes in my parent layout component. I have a side menu for my dashboard pages, and the side menu is a layout file. In one of my pages, i need to be able to hit the TV mode button, which should shut the side menu bar (boolean value) from the child component button, but there's no easy intuitive way to do this. Seems like all i found is something hacky

Answered by joulev

for this you can use a context provider

View full answer

20 Replies

@Tufted Flycatcher I'm unable to trigger state changes in my parent layout component. I have a side menu for my dashboard pages, and the side menu is a layout file. In one of my pages, i need to be able to hit the `TV mode` button, which should shut the side menu bar (boolean value) from the child component button, but there's no easy intuitive way to do this. Seems like all i found is something hacky

joulev

2023-10-28T05:11:24.000Z

Can you give us some minimal code to illustrate current behaviour and what you want to have?

Tufted FlycatcherOP

2023-10-28T05:13:04.000Z

in my layout.jsx, I have this:

  const [sidebarOpen, setSidebarOpen] = useState(false)  <Dialog
            as="div"
            className="relative z-50 lg:hidden"
            onClose={setSidebarOpen}
          >           <main className="py-10">
            <div className="px-4 sm:px-6 lg:px-8">{children}</div>
          </main>

and in my page.jsx, i have a button when i click it, it should be able to set setSidebarOpen to false. It's simple what i want to do

Please provide samples of solutions please

joulev

2023-10-28T05:15:00.000Z

Can you make a minimal reproduction repository so I can clone and try? If you just give snippets then I can only guess and Iâ€™d rather not do that

Tufted FlycatcherOP

2023-10-28T05:15:26.000Z

Yes, let me make a minimal reproduction. codesandbox link work?

joulev

2023-10-28T05:15:48.000Z

Yes

Tufted FlycatcherOP

2023-10-28T05:32:52.000Z

@joulev will this work: https://codesandbox.io/p/sandbox/inspiring-brattain-tlgq32?file=%2Fapp%2Flayout.tsx%3A94%2C1

also, i have a search form. I would like to type in that search form to filter out items in my page.jsx

@Tufted Flycatcher <@484037068239142956> will this work: https://codesandbox.io/p/sandbox/inspiring-brattain-tlgq32?file=%2Fapp%2Flayout.tsx%3A94%2C1

joulev

2023-10-28T05:41:50.000Z

Can you simplify the layout? Since this problem doesnâ€™t concern css it would be best to remove any styling and animation. Helpers here might not have the time and willpower to parse 300+ lines in a question

@Tufted Flycatcher also, i have a search form. I would like to type in that search form to filter out items in my page.jsx

joulev

2023-10-28T05:42:01.000Z

And add this in there too

Basically, a reproduction repository means a very minimal nextjs without any unrelated bits that shows the problem this post concerns, so that other people can try to fix that problem from the code

Tufted FlycatcherOP

2023-10-28T05:45:00.000Z

okay, look now: https://codesandbox.io/p/sandbox/inspiring-brattain-tlgq32?file=%2Fapp%2Flayout.tsx%3A17%2C8. All i want to do, it to toggle the value for sidebarOpen, in the page.tsx file with the button tag

@Tufted Flycatcher okay, look now: https://codesandbox.io/p/sandbox/inspiring-brattain-tlgq32?file=%2Fapp%2Flayout.tsx%3A17%2C8. All i want to do, it to toggle the value for sidebarOpen, in the page.tsx file with the button tag

joulev

2023-10-28T06:10:51.000Z

ok so i finally get back to my laptop

joulev

2023-10-28T06:10:55.000Z

for this you can use a context provider

Answer

Tufted FlycatcherOP