You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I wanted to create a multi-level accordian component, but I don't understand why it doesn't work as expected.
When the same accordian component is single-level, everything works correctly. But the attempt to add a second level, brought an unexpected effect, freezing both levels.
2. the page accordion-with-nested-accordion from the router on which it does not work properly , ./routes/accordion/with-nested-accordion.tsx
import{useSignal}from"@preact/signals";importdefinefrom"$utils/fresh.ts";importLayoutfrom"$components/Layout.tsx";importAccordionItemfrom"$islands/AccordionItem.tsx";importAccordionContainerfrom"$components/AccordionContainer.tsx";exportdefaultdefine.page(functionPageAccordionWithNestedAccordion(/*{url}*/){constshowItem1=useSignal(true);constshowItem1A=useSignal(true);constshowItem1B=useSignal(false);constshowItem1C=useSignal(false);constshowItem2=useSignal(false);constshowItem2A=useSignal(false);constshowItem2B=useSignal(false);constshowItem3=useSignal(false);//console.log(url.pathname)return(<LayoutnavShow={true}navActive="/accordion"asideShow={true}aside={<AccordionContainer><AccordionItemlabel="Item 1"labelIsLink={true}href=""show={showItem1}><div><strong>This is the first item's accordion body.</strong> Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
rhoncus purus, vitae tincidunt nibh. Vivamus elementum egestas
ligula in varius. Proin ac erat pretium, ultricies leo at, cursus
ante. Pellentesque at odio euismod, mattis urna ac, accumsan
metus. Nam nisi leo, malesuada vitae pretium et, laoreet at lorem.
Curabitur non sollicitudin neque.
</div><AccordionContainer><AccordionItemlabel="Item 1-A"show={showItem1A}><div><strong>This is the "A" item's accordion body inside first item body</strong> Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
rhoncus purus, vitae tincidunt nibh. Vivamus elementum egestas
ligula in varius. Proin ac erat pretium, ultricies leo at, cursus
ante. Pellentesque at odio euismod, mattis urna ac, accumsan
metus. Nam nisi leo, malesuada vitae pretium et, laoreet at lorem.
Curabitur non sollicitudin neque.
</div></AccordionItem><AccordionItemlabel="Item 1-B"labelIsLink={true}href=""show={showItem1B}><div><strong>This is the "B" item's accordion body inside first item body</strong> Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
rhoncus purus, vitae tincidunt nibh. Vivamus elementum egestas
ligula in varius. Proin ac erat pretium, ultricies leo at, cursus
ante. Pellentesque at odio euismod, mattis urna ac, accumsan
metus. Nam nisi leo, malesuada vitae pretium et, laoreet at lorem.
Curabitur non sollicitudin neque.
</div></AccordionItem><AccordionItemlabel="Item 1-C"show={showItem1C}><div><strong>This is the "C" item's accordion body inside first item body</strong> Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
rhoncus purus, vitae tincidunt nibh. Vivamus elementum egestas
ligula in varius. Proin ac erat pretium, ultricies leo at, cursus
ante. Pellentesque at odio euismod, mattis urna ac, accumsan
metus. Nam nisi leo, malesuada vitae pretium et, laoreet at lorem.
Curabitur non sollicitudin neque.
</div></AccordionItem></AccordionContainer></AccordionItem><AccordionItemlabel="Item 2"show={showItem2}><div><strong>This is the second item's accordion body.</strong> Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
rhoncus purus, vitae tincidunt nibh. Vivamus elementum egestas
ligula in varius. Proin ac erat pretium, ultricies leo at, cursus
ante. Pellentesque at odio euismod, mattis urna ac, accumsan
metus. Nam nisi leo, malesuada vitae pretium et, laoreet at lorem.
Curabitur non sollicitudin neque.
</div><AccordionContainer><AccordionItemlabel="Item 2-A"show={showItem2A}><div><strong>This is the "A" item's accordion body inside second item body</strong> Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
rhoncus purus, vitae tincidunt nibh. Vivamus elementum egestas
ligula in varius. Proin ac erat pretium, ultricies leo at, cursus
ante. Pellentesque at odio euismod, mattis urna ac, accumsan
metus. Nam nisi leo, malesuada vitae pretium et, laoreet at lorem.
Curabitur non sollicitudin neque.
</div></AccordionItem><AccordionItemlabel="Item 2-B"labelIsLink={true}href=""show={showItem2B}><div><strong>This is the "B" item's accordion body inside decond item body</strong> Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
rhoncus purus, vitae tincidunt nibh. Vivamus elementum egestas
ligula in varius. Proin ac erat pretium, ultricies leo at, cursus
ante. Pellentesque at odio euismod, mattis urna ac, accumsan
metus. Nam nisi leo, malesuada vitae pretium et, laoreet at lorem.
Curabitur non sollicitudin neque.
</div></AccordionItem></AccordionContainer></AccordionItem><AccordionItemlabel="Item 3"show={showItem3}><div><strong>This is the third item's accordion body.</strong> Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
rhoncus purus, vitae tincidunt nibh. Vivamus elementum egestas
ligula in varius. Proin ac erat pretium, ultricies leo at, cursus
ante. Pellentesque at odio euismod, mattis urna ac, accumsan
metus. Nam nisi leo, malesuada vitae pretium et, laoreet at lorem.
Curabitur non sollicitudin neque.
</div></AccordionItem></AccordionContainer>}><div></div></Layout>);});
3. the page accordion-without-nested-accordion from the router on which it works properly (the same component), ./routes/accordion/without-nested-accordion.tsx
import{useSignal}from"@preact/signals";importdefinefrom"$utils/fresh.ts";importLayoutfrom"$components/Layout.tsx";importAccordionItemfrom"$islands/AccordionItem.tsx";importAccordionContainerfrom"$components/AccordionContainer.tsx";exportdefaultdefine.page(functionPageAccordionWithoutNestedAccordion(/*{url}*/){constshowItem1=useSignal(true);constshowItem2=useSignal(false);constshowItem3=useSignal(false);//console.log(url.pathname)return(<LayoutnavShow={true}navActive="/accordion"asideShow={true}aside={<AccordionContainer><AccordionItemlabel="Item 1"labelIsLink={true}href=""show={showItem1}><div><strong>This is the first item's accordion body.</strong> Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
rhoncus purus, vitae tincidunt nibh. Vivamus elementum egestas
ligula in varius. Proin ac erat pretium, ultricies leo at, cursus
ante. Pellentesque at odio euismod, mattis urna ac, accumsan
metus. Nam nisi leo, malesuada vitae pretium et, laoreet at lorem.
Curabitur non sollicitudin neque.
</div></AccordionItem><AccordionItemlabel="Item 2"show={showItem2}><div><strong>This is the second item's accordion body.</strong> Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
rhoncus purus, vitae tincidunt nibh. Vivamus elementum egestas
ligula in varius. Proin ac erat pretium, ultricies leo at, cursus
ante. Pellentesque at odio euismod, mattis urna ac, accumsan
metus. Nam nisi leo, malesuada vitae pretium et, laoreet at lorem.
Curabitur non sollicitudin neque.
</div></AccordionItem><AccordionItemlabel="Item 3"show={showItem3}><div><strong>This is the third item's accordion body.</strong> Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
rhoncus purus, vitae tincidunt nibh. Vivamus elementum egestas
ligula in varius. Proin ac erat pretium, ultricies leo at, cursus
ante. Pellentesque at odio euismod, mattis urna ac, accumsan
metus. Nam nisi leo, malesuada vitae pretium et, laoreet at lorem.
Curabitur non sollicitudin neque.
</div></AccordionItem></AccordionContainer>}><div></div></Layout>);});
Maybe it's my not understanding. I expected a different action.
If my expectations were wrong, I don't quite understand what the problem is.
Thank you in advance for your support.
The text was updated successfully, but these errors were encountered:
j-Cis
added a commit
to j-Cis/deno-fresh-error-notworking-nested-islands
that referenced
this issue
Jun 18, 2024
The example without nesting is also broken, in that the third item starts closed and then immediately opens after load.
I think the problem comes from using using a signal in a route: #1540. At the least, it would have to be an async route, but frankly it seems from the discussion over there it's an anti-pattern. At least, I don't understand what happens under the hook when you call useSignal on the server.
The right way to manage state in your app depends on how you want accordion items to interact with each other. If the state of each item is independent of all the others, then I would just use useState locally in AccordionItem.
I wanted to create a multi-level accordian component, but I don't understand why it doesn't work as expected.
When the same accordian component is single-level, everything works correctly. But the attempt to add a second level, brought an unexpected effect, freezing both levels.
I created a GitHub repository to model this problem (https://github.com/j-Cis/deno-fresh-error-notworking-nested-islands)
The defective this operation can be checked here: (https://deno-fresh2-errors.deno.dev/accordion/with-nested-accordion)
Below is
1. the component affected of problem or error,
2. and the page accordion-with-nested-accordion from the router on which it does not work properly ,
3. and the page accordion-without-nested-accordion from the router on which it works properly (the same component),
4. the full of simple model is in the github repository. (https://github.com/j-Cis/deno-fresh-error-notworking-nested-islands)
1-a. the component affected of problem or error,
./components/AccordionContainer.tsx
.1-b. the component affected of problem or error,
./islands/AccordionItem.tsx
.2. the page accordion-with-nested-accordion from the router on which it does not work properly ,
./routes/accordion/with-nested-accordion.tsx
3. the page accordion-without-nested-accordion from the router on which it works properly (the same component),
./routes/accordion/without-nested-accordion.tsx
Maybe it's my not understanding. I expected a different action.
If my expectations were wrong, I don't quite understand what the problem is.
Thank you in advance for your support.
The text was updated successfully, but these errors were encountered: